在线音乐播放器（ajax请求网络中免费的api）

最新推荐文章于 2024-07-11 16:26:04 发布

TheZing

最新推荐文章于 2024-07-11 16:26:04 发布

阅读量3.5k

点赞数

分类专栏： JavaScript 文章标签： ajax api 音乐网络免费

本文链接：https://blog.csdn.net/jingoat/article/details/78522067

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="referrer" content="never">
<title></title>
</head>

<style type="text/css">
table{display: none;border: none;}
</style>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){

$("#btn").click(function(){
var value=$("#info").val();
$.ajax({
type:"get",
url:"http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query="+value,
async:true,
dataType:"jsonp",
success:function(data1){
var songids=data1.song;
console.log(songids.length);
for(var i=0;i<songids.length;i++){
var songid=songids[i].songid;
var td=document.createElement("td");
var a=document.createElement("a");
a.href="#";
a.src=songid;

var songname=songids[i].songname
console.log(songname);
a.textContent=songname;
var tr=document.createElement("tr");
var tbody=document.getElementsByTagName("tbody")[0];
td.appendChild(a);
tr.appendChild(td);
$("table")[0].style.display="block";
tbody.appendChild(tr);
a.οnclick=function(){
console.log("a.src"+this.src);
$.ajax({
type:"get",
url:"http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.song.play&songid="+this.src,

async:true,
dataType:"jsonp",
success:function(data2){
var audio=document.getElementById("audio");
audio.src=data2.bitrate.file_link;
audio.play();
}
});
}
}
}
});

})

})

</script>

<body>
<h3>网易劲音乐</h3>
请输入要查询的歌曲：<input type="text" value="" id="info"/><button id="btn">查询</button>
<div id="">
<audio id="audio" preload="auto" controls="controls">
浏览器不支持h5音乐标签
</audio>
</div>

<h4>歌曲列表</h4>
<table border="" cellspacing="" cellpadding="">
<tr><th>点击播放</th></tr>
</table>
</body>
</html>