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);
})

这样就可以在点击歌曲列表时候弹出播放器主键。

 

原文转自:jQuery+JSONP实现虾米音乐的检索、选取和播放