jQuery+JSONP实现虾米音乐的检索、选取和播放
这篇文章是我自己原创的,所以请各位转载的朋友注意追加本文连接。
http://www.jqdemo.com/927.html
很多人都希望能在发帖的时候带上音乐。
当然你可以去 http://swf123.com/创建一个flash播放器带上音乐,但是这个是需要你追加一个可以用的音乐地址的。
而虾米不同,你可以直接调用他的widget.最后生成图中展示的播放器。
这里公布核心代码,提供案例下载。
在此感谢bejson收集各种免费的json接口
这里我们要用到的接口是:
http://kuang.xiami.com/app/nineteen/search/key/歌曲名称/diandian/1/page/歌曲当前页?_=当前毫秒&callback=getXiamiData
返回是一个getXiamiData(json数据)的回调函数 其中的json如图:

我们可以看到我们所查的音乐位于/results数组里
song_id 就是音乐的ID
song_name就是音乐名称
album_logo就是专辑图片
主要步骤:
1.我们主要是要做一个搜索框并且绑定他的keyup事件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | var timer; function searchMusicList(Page){ searchMusicLoading( true ); musicPage = Page; var head = "search_result" ; var src1= "http://kuang.xiami.com/app/nineteen/search/key/" +encodeURIComponent($( "#search_input" ).val())+ "/diandian/1/page/" +Page+ "?_=" + new Date().getTime()+ "&callback=getXiamiData" ; if (timer!= null ) clearTimeout(timer); timer= setTimeout( function (){ JSONP = $.getScript(src1, function (result){}); }, 500); } |
这段代码其实很简单 就是加载jsonp数据,但是这里增加了一个倒计时函数,目的在于一首歌不可能只有一个字母,你要是没敲一个字母都要去检索一次,浏览器会非常的慢。
所以我这里定义了一个定时器,如果keyup之后发现当前的timer存在则重置当前timer
2.剩下的就是去解析返回的jsonp了。那个比较简单,不多讲
3.获取到前面的song_id,song_name等参数后 我们只需要拼接播放器代码
1 2 3 4 | $( ".songLi" ).live( 'click' , function (){ var PL = '<h3>曲名:' +$( this ).attr( "name" )+ '</h3><embed src="http://www.xiami.com/widget/470304_' + $( this ).attr("id ") + '/singlePlayer.swf" type= "application/x-shockwave-flash" width= "257" height= "33" wmode= "transparent" ></embed> <div><ul><li><div id= "divFri" ></div></li><li>'; art.dialog(PL); }) |
这样就可以在点击歌曲列表时候弹出播放器主键。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步