這篇文章主要講解了“HTML怎么制作一個簡潔的音樂播放器”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“HTML怎么制作一個簡潔的音樂播放器”吧！
這個播放器的音樂是通過豆瓣FM的API獲取到的，我們可以隨機的聽到豆瓣FM的任何音樂。
html部分
代碼：
<divclass="wrapper">
<divclass="background"></div>
<divclass="content">
<audiosrc=""></audio>
<divclass="music-massage">
<pclass="musicname"></p>
<pclass="musicer"></p>
</div>
<divclass="music-icon">
<aclass="m-iconm-fenxiangcolored"href="http://service.weibo.com/share/share.php?title=#_loginLayer_1466697157538"target="new"></a>
<spanclass="m-iconm-starcolored"></span>
<spanclass="m-iconm-heartcolored"></span>
</div>
</div>
<spanclass="basebar">
<spanclass="progressbar"></span>
</span>
<divclass="controls">
<divclass="play-control">
<spanclass="m-iconm-playbtn1"title="播放/暫停"></span>
<spanclass="m-iconm-changebtn2"title="換頻道"></span>
<spanclass="m-iconm-nextbtn3"title="換曲"></span>
</div>
<divclass="music-control">
<spanclass="m-iconm-xunhuancolored"></span>
<spanclass="m-iconm-radomcolored"></span>
</div>
</div>
</div>
這里就不寫css的代碼了，大家可以直接看源文件或者從開發者工具中去看。如果有問題可以私聊我。
js部分
代碼一（播放控制）：
//播放控制
varmyAudio=$("audio")[0];
//播放/暫?？刂?/p>
$(".btn1").click(function(){
if(myAudio.paused){
play()
}else{
pause()
}
});
//頻道切換
$(".btn2").click(function(){
getChannel();
});
//播放下一曲音樂
$(".btn3").click(function(){
getmusic();
});
functionplay(){
myAudio.play();
$('.btn1').removeClass('m-play').addClass('m-pause');
}
functionpause(){
myAudio.pause();
$('.btn1').removeClass('m-pause').addClass('m-play');
}
代碼二（ajax獲取豆瓣fm音樂）：
//獲取隨機頻道信息
functiongetChannel(){
$.ajax({
url:'http://api.jirengu.com/fm/getChannels.php',
dataType:'json',
Method:'get',
success:function(response){
varchannels=response.channels;
varnum=Math.floor(Math.random()*channels.length);
varchannelname=channels[num].name;//獲取隨機頻道的名稱
varchannelId=channels[num].channel_id;//獲取隨機頻道ID
$('.record').text(channelname);
$('.record').attr('title',channelname);
$('.record').attr('data-id',channelId);//將頻道ID計入data-id中
getmusic();
}
})
}
//通過ajax獲取歌曲
functiongetmusic(){
$.ajax({
url:'http://api.jirengu.com/fm/getSong.php',
dataType:'json',
Method:'get',
data:{
'channel':$('.record').attr('data-id')
},
success:function(ret){
varresource=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();//播放
}
})
};
注意：豆瓣會限制我們的訪問，所以在<head>標簽下一定要添加<metaname="referrer"content="no-referrer">
代碼三（進度條控制）：
setInterval(present,500)//每0.5秒計算進度條長度
$(".basebar").mousedown(function(ev){//拖拽進度條控制進度
varposX=ev.clientX;
vartargetLeft=$(this).offset().left;
varpercentage=(posX-targetLeft)/400100;
myAudio.currentTime=myAudio.duration*percentage/100;
});
functionpresent(){
varlength=myAudio.currentTime/myAudio.duration100;
$('.progressbar').width(length+'%');//設置進度條長度
//自動下一曲
if(myAudio.currentTime==myAudio.duration){
getmusic()
}
}
html5中audio標簽本身提供進度條功能，以及音量控制功能的，這里我為了界面的好看自己設置了進度條，音量控制還沒有加，大家可以自行添加。
感謝各位的閱讀，以上就是“HTML怎么制作一個簡潔的音樂播放器”的內容了，經過本文的學習后，相信大家對HTML怎么制作一個簡潔的音樂播放器這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
