聲明：本文章版權歸饑人谷和張新望所有，轉載需經作者同意

這個播放器的音樂是通過豆瓣FM的API獲取到的，我們可以隨機的聽到豆瓣FM的任何音樂。(這些API是饑人谷的老師整理的) DEMO html+js源代碼 css源代碼

• 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())代碼讓瀏覽器預加載播放器。這里基本已經把播放器完成了，功能比較簡單。有興趣的同學可以自己再添加功能。

PS：這個播放器最厲害的一點就是你永遠猜不到下一首歌是什么，是不是很吊？？？哈哈哈

轉載于:https://juejin.im/post/5a30fe5df265da432a7b9515

總結

以上是生活随笔為你收集整理的【html、css、jq】制作一个简洁的音乐播放器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。