MusicPlay 音樂播放器(純前端)
阿新 • • 發佈:2019-02-11
純Css,js前端音樂播放器,介面UI比較好。我特別喜歡,適合二次開發,呼叫了網易雲第三方介面以及將歌曲連結匯出可以訪問的歌曲連結,實現了非同步歌曲搜尋播放,以及非同步顯示歌詞等.結合html5 新特性實現歌曲暫停,下一首,快進等等.為大二前端練手專案.採用漸變質背景
是前端練手的好專案,強烈推薦,會讓你對js產生濃濃的興趣
挺好玩的,挺有意思的
記得當時搞出來高興了好久
引數
var data = {
"type": 1,//單曲
"limit": 1,//返回數量1
"s": value,//搜尋詞
"callback": "jsonpcallback"
};
搜尋歌曲實現播放關鍵程式碼
searchBtn.addEventListener('click', function () { var value = keyword.value; if (!value) { alert('關鍵詞不能為空'); return; } //http://music.163.com/api/song/lyric?os=pc&id=" . $music_id . "&lv=-1&kv=-1&tv=-1.歌詞的連結 var url = "http://s.music.163.com/search/get/"; var data = { "type": 1,//單曲 "limit": 1,//返回數量1 "s": value,//搜尋詞 "callback": "jsonpcallback" }; var buffer = []; for (var key in data) { buffer.push(key + '=' + encodeURIComponent(data[key])); } var fullpath = url + '?' + buffer.join('&'); CreateScript(fullpath); }); //非同步載入js不影響當前渲染結果 function CreateScript (src) { var el = document.createElement('script'); el.src = src;//載入url el.async = true; el.defer = true; document.body.appendChild(el); };
關鍵程式碼:
function jsonpcallback (rs) { var resultHtml = '歌曲:<strong>' + rs.result.songs[0].name + '</strong>' + '歌手:<strong>' + rs.result.songs[0].artists[0].name + '</strong>' + '<a href="javascript:;" id="to-play">立即播放</a>'; //這個時候開始查詢歌詞 // http://music.163.com/api/song/lyric?os=pc&id=" . $music_id . "&lv=-1&kv=-1&tv=-1 var lyc='http://music.163.com/api/song/lyric?os=pc&id='+rs.result.songs[0].id+'&lv=-1&kv=-1&tv=-1&callback=lycjson'; alert("已經搜尋到了歌詞"); window.open(lyc,"新視窗歌詞","width=500,height=500,toolbar=no,scrollbars=no,menubar=no,screenX=100,screenY=100"); //var el = document.createElement('script'); //el.src = 'http://music.163.com/api/song/lyric?os=pc&id='+rs.result.songs[0].id+'&lv=-1&kv=-1&tv=-1&callback=lycjson';//載入url //el.async = true; //el.defer = true; //document.body.appendChild(el); //window.open(lyc,"新視窗歌詞","width=100,height=200,toolbar=no,scrollbars=no,menubar=no,screenX=100,screenY=100"); // window.location.href=lyc; //解釋json //alert(lycjson.lrc.lyric); // http://s.music.163.com/search/get/?type=1&limit=1&s=%E5%8C%97%E4%BA%AC%E6%AC%A2%E8%BF%8E%E4%BD%A0&callback=jsonpcallback:formatted //http://s.music.163.com/search/get/?type=1&limit=1&s=%E6%88%91%E5%92%8C%E4%BD%A0&callback=jsonpcallback result.innerHTML = resultHtml; result.setAttribute('data-audio', rs.result.songs[0].audio); result.setAttribute('data-img', rs.result.songs[0].album.picUrl); result.setAttribute('data-music', rs.result.songs[0].name); result.setAttribute('data-singer', rs.result.songs[0].artists[0].name); result.style.opacity = '1'; }; function lycjson(rs){ alert('123'); var string =rs.lrc.lyric; alert(string); }
網站效果圖:
歌詞
挺有意思挺好玩的專案強烈推薦會讓你對js產生濃濃的興趣~~~~哈哈哈
Github上專案原始碼地址: