這篇文章是我自己原創的,所以請各位轉載的朋友注意追加本文連接。
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);
})
這樣就可以在點擊歌曲列表時候彈出播放器主鍵。