溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“HTML怎么制作一個(gè)簡(jiǎn)潔的音樂(lè)播放器”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“HTML怎么制作一個(gè)簡(jiǎn)潔的音樂(lè)播放器”吧！
這個(gè)播放器的音樂(lè)是通過(guò)豆瓣FM的API獲取到的，我們可以隨機(jī)的聽(tīng)到豆瓣FM的任何音樂(lè)。
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的代碼了，大家可以直接看源文件或者從開(kāi)發(fā)者工具中去看。如果有問(wèn)題可以私聊我。
js部分
代碼一（播放控制）：
//播放控制
varmyAudio=$("audio")[0];
//播放/暫停控制
$(".btn1").click(function(){
if(myAudio.paused){
play()
}else{
pause()
}
});
//頻道切換
$(".btn2").click(function(){
getChannel();
});
//播放下一曲音樂(lè)
$(".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音樂(lè)）：
//獲取隨機(jī)頻道信息
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;//獲取隨機(jī)頻道的名稱
varchannelId=channels[num].channel_id;//獲取隨機(jī)頻道ID
$('.record').text(channelname);
$('.record').attr('title',channelname);
$('.record').attr('data-id',channelId);//將頻道ID計(jì)入data-id中
getmusic();
}
})
}
//通過(guò)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,//獲取歌詞的參數(shù)
ssid=resource.ssid,//獲取歌詞的參數(shù)
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();//播放
}
})
};
注意：豆瓣會(huì)限制我們的訪問(wèn)，所以在<head>標(biāo)簽下一定要添加<metaname="referrer"content="no-referrer">
代碼三（進(jìn)度條控制）：
setInterval(present,500)//每0.5秒計(jì)算進(jìn)度條長(zhǎng)度
$(".basebar").mousedown(function(ev){//拖拽進(jìn)度條控制進(jìn)度
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+'%');//設(shè)置進(jìn)度條長(zhǎng)度
//自動(dòng)下一曲
if(myAudio.currentTime==myAudio.duration){
getmusic()
}
}
html5中audio標(biāo)簽本身提供進(jìn)度條功能，以及音量控制功能的，這里我為了界面的好看自己設(shè)置了進(jìn)度條，音量控制還沒(méi)有加，大家可以自行添加。
感謝各位的閱讀，以上就是“HTML怎么制作一個(gè)簡(jiǎn)潔的音樂(lè)播放器”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)HTML怎么制作一個(gè)簡(jiǎn)潔的音樂(lè)播放器這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
