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事件
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等参数后 我们只需要拼接播放器代码
$(".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);
})
这样就可以在点击歌曲列表时候弹出播放器主键。
