音乐播放器增强版(ajax请求网络api)

原创 2017年11月15日 11:21:29
<!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;
$.ajax({
type:"get",
url:"http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.song.play&songid="+songid,
async:true,
dataType:"jsonp",
success:function(data2){
var td1=document.createElement("td");
var td2=document.createElement("td");
var td3=document.createElement("td");
var td4=document.createElement("td");
var a=document.createElement("a");
//歌曲下载和播放地址
var songFileLink=data2.bitrate.file_link;
a.src=songFileLink;
//歌名
var songname=data2.songinfo.title;
//作者
var songAuthor=data2.songinfo.author
td2.textContent=songAuthor;
//图片(地址)
var songPic=data2.songinfo.pic_small;
var img=document.createElement("img");
img.src=songPic;
td3.appendChild(img);
td4.textContent=songFileLink;
a.textContent=songname;
var tr=document.createElement("tr");
var tbody=document.getElementsByTagName("tbody")[0];
td1.appendChild(a);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
$("table")[0].style.display="block";
tbody.appendChild(tr);
a.onclick=function(){
console.log("a.src"+this.src);
var audio=document.getElementById("audio");
audio.src=this.src; 
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>songName</th>
<th>artistName</th>
<th>pic</th>
<th>url</th>

</tr>
</table>
</body>
</html>

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

table{display: none;border: none;} $(function(){ $("#btn").click(function(){ var value=$(...
  • jingoat
  • jingoat
  • 2017-11-13 16:52:26
  • 324

简单几步实现网络音乐播放器(Qt版百度FM)

简单几步实现 百度FM音乐 Qt版本       很久之前写的软件了,一直没有总结,也懒得继续开发了,这里简单总结一下,也算是对自己的努力一个交代吧。        起源:不大习惯打开一个浏览器听歌,...
  • spygg
  • spygg
  • 2016-12-28 03:35:04
  • 3316

$.ajax JQuery请求网络的一种方式

在游戏中用到了 /** * Http请求 * @param url * @param params * @param succ...
  • W_han__
  • W_han__
  • 2016-10-21 16:54:13
  • 1623

Jquery Ajax请求WebApi(Post请求方式)

html代码 $(function(){ $.ajax({ url:"/api/mms/subsystemshow/GetSub...
  • HelisG
  • HelisG
  • 2017-08-09 16:28:28
  • 1304

Ajax 发送WebAPI

控制器 //注意路由需要添加{action} 如果路由中并未设置,控制器根据传递的参数个数,类型以及请求方式匹配到相应的方法 直接使用api/Demo //并不需要指定方法名...
  • longchenghui20
  • longchenghui20
  • 2017-08-08 17:39:51
  • 209

ajax请求restful接口端服务

var pageStatus=""; var dnsName = "localhost:7070"; // 本地 //获得URL后面带的参数,并封装成对象 function getR...
  • big1989wmf
  • big1989wmf
  • 2017-04-12 16:39:23
  • 1826

AJAX调用百度API

地图显示界面 3.5.1 页面程序编写解析                                                                             ...
  • huangchijun11
  • huangchijun11
  • 2016-12-12 10:46:51
  • 1911

Android开发本地及网络Mp3音乐播放器(二十)歌曲下载完成后通知主界面更新本地音乐

转载请注明出处:http://blog.csdn.net/iwanghang/article/details/51448597 项目源码(打赏5积分请点这边):http://download.csdn...
  • iwanghang
  • iwanghang
  • 2016-05-18 23:18:53
  • 8302

Ajax网络请求基本用法

网络请求Dome 员工查询 请输入员工编号:
  • Arnly
  • Arnly
  • 2017-04-27 14:44:41
  • 443

QT简单音乐播放器(访网易云)

  • 2016年08月11日 10:27
  • 41.65MB
  • 下载
收藏助手
不良信息举报
您举报文章:音乐播放器增强版(ajax请求网络api)
举报原因:
原因补充:

(最多只允许输入30个字)