宣告：本文章版權歸飢人谷和張新望所有，轉載需經作者同意
- html部分
程式碼：
這裡就不寫css的程式碼了，大家可以直接看原始檔或者從開發者工具中去看。如果有問題可以私聊我。
- js部分 程式碼一（播放控制）： //播放控制 var myAudio = $("audio")[0]; // 播放/暫停控制 $(".btn1").click(function(){ if (myAudio.paused) { play() } else { pause() } }); // 頻道切換 $(".btn2").click(function(){ getChannel(); }); // 播放下一曲音樂 $(".btn3").click(function(){ getmusic(); }); function play(){ myAudio.play(); $('.btn1').removeClass('m-play').addClass('m-pause'); } function pause(){ myAudio.pause(); $('.btn1').removeClass('m-pause').addClass('m-play'); } 程式碼二（ajax獲取豆瓣fm音樂）： //獲取隨機頻道資訊 function getChannel(){ $.ajax({ url: 'http://api.jirengu.com/fm/getChannels.php', dataType: 'json', Method: 'get', success: function(response){ var channels = response.channels; var num = Math.floor(Math.random()*channels.length); var channelname = channels[num].name;//獲取隨機頻道的名稱 var channelId = channels[num].channel_id;//獲取隨機頻道ID $('.record').text(channelname); $('.record').attr('title',channelname); $('.record').attr('data-id',channelId);//將頻道ID計入data-id中 getmusic(); } }) } // 通過ajax獲取歌曲 function getmusic(){ $.ajax({ url: 'http://api.jirengu.com/fm/getSong.php', dataType: 'json', Method: 'get', data:{ 'channel': $('.record').attr('data-id') }, success: function (ret) { var resource = ret.song[0], url = resource.url, bgPic = resource.picture, sid = resource.sid,//獲取歌詞的引數 ssid = resource.ssid,//獲取歌詞的引數 title = resource.title, author = resource.artist; $('audio').attr('src',url); $('.musicname').text(title); $('.musicname').attr('title',title) $('.musicer').text(author); $('.musicer').attr('title',author) $(".background").css({ 'background':'url('+bgPic+')', 'background-repeat': 'no-repeat', 'background-position': 'center', 'background-size': 'cover', }); play();//播放 } }) };
注意：豆瓣會限制我們的訪問，所以在標籤下一定要新增<meta name="referrer" content="no-referrer">
程式碼三（進度條控制）：
setInterval(present,500) //每0.5秒計算進度條長度
$(".basebar").mousedown(function(ev){ //拖拽進度條控制進度
var posX = ev.clientX;
var targetLeft = $(this).offset().left;
var percentage = (posX - targetLeft)/400100;
myAudio.currentTime = myAudio.duration * percentage/100;
});
function present(){
var length = myAudio.currentTime/myAudio.duration100;
$('.progressbar').width(length+'%');//設定進度條長度
//自動下一曲
if(myAudio.currentTime == myAudio.duration){
getmusic()
}
}
html5中audio標籤本身提供進度條功能，以及音量控制功能的，這裡我為了介面的好看自己設定了進度條，音量控制還沒有加，大家可以自行新增。歌詞資訊獲取方式：
http://jirenguapi.applinzi.com/fm/getLyric.php?ssid=4f86&sid=1451876
這裡的sid&ssid獲取歌曲資訊可以得到。
然後我們需要在js檔案結尾加上$(document).ready(getChannel())程式碼讓瀏覽器預載入播放器。這裡基本已經把播放器完成了，功能比較簡單。有興趣的同學可以自己再新增功能。