音乐播放器增强版(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>

相关文章推荐

Android开发之本地音乐播放器(增强版)

界面部分 主界面: 歌曲详情界面: 通知栏界面: 功能介绍 使用了广播和服务来完成部分功能 可以自动查找本地的mp3文件并显示在列表中 主界面和详情界面的seekbar的进度条都可以跟随歌曲播放更新或...
  • ygd1994
  • ygd1994
  • 2016年05月16日 22:37
  • 1015

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

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

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

Python入门之爬取百度音乐 先说一下为什么会有这篇文章,首先肯定是有这个需求了,本人出差在外地,这里的网速卡到爆,根本支撑不了在线听歌的要求,所以就想下载...
  • spygg
  • spygg
  • 2016年12月28日 04:02
  • 2530

《项目——网络音乐播放器》——网络请求之for循环内嵌套的try...catch...里面放break

今天在做一个使用百度音乐接口的音乐播放器 在做网络请求时,有可能获取不到数据,返回一个"[]" 我也是醉了,居然在for循环内嵌套的try...catch...里面放break,还想跳出循环 到底是...

VB网络DJ音乐播放器完美版

  • 2012年09月14日 18:15
  • 18KB
  • 下载

微信小程序开发之音乐播放器 真机测试 audio API

简单的试了试播放器,还是有不少坑的.开始在模拟器上跑,一直没有声音,总是刚开始播放就暂停.做个笔记. 准备资源: 音乐图片地址:http://ac-5g9r20ds.clouddn.com/63b...

音乐播放器——SoundManager API介绍

SoundManager是 一个JavaScript库,通过它开发者可以控制Web上音频和视频的播放,它包装了Flash sound API,通过JavaScript和ActionScript和通信,...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:音乐播放器增强版(ajax请求网络api)
举报原因:
原因补充:

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