title: JS實(shí)現(xiàn)音樂播放器
date: 2017-05-08 22:54:22
categories: blog
tags: blog
回首向來蕭瑟處，也無風(fēng)雨也無窮贯莺！
JS+Audio實(shí)現(xiàn)簡單音樂播放器（-）
H5新增<audio>標(biāo)簽
加之最近一直苦修JS函數(shù)及Dom操作去扣，便萌發(fā)做一款簡單音樂播放器V00版（未來會逐漸完善柱衔，比如加入更多資源、新增爬蟲爬去音樂庫）愉棱，廢話不說直接上程序唆铐；
1奔滑、Html程序
<div id="Music" class="Music">
<p id="head" class="head">
Yesterday once more...
</p>
<div id="body" class="body">
<div class="l" >
</div>
<p>yestoday once more...</p>
<ul id="Timer" class="Timer">
<li>0:00</li>
<li>
<div class="chose" id="chose"></div>
</li>
<li></li>
</ul>
</div>
<div id="floor" class="floor">
<audio src="music/McBlog.mp3" ></audio> //此處放置音樂資源
<p>Top</p>
<p>Open</p>
<p>Next</p>
</div>
</div>
簡單實(shí)現(xiàn)如下圖：
Music
2王浴、CSS樣式如下：
*{
padding: 0;
margin: 0;
}
.Music{
margin: 20px;
width: 300px;
height: 450px;
background-color:white;
box-shadow: 0 0 5px gray;
display: flex;
flex-direction: column;
text-align: center;
justify-content: space-between;
}
.head{
display: block;
text-align: center;
height: 30px;
line-height: 30px;
width: 200px;
padding: 20px 50px;
flex-grow: 0;
}
.body{
padding: 20px 60px;
flex-grow: 1;
}
.l{
width: 180px;
height: 180px;
border-radius: 100px;
overflow: hidden;
}
.l img{
height: 100%;
}
ul{
list-style: none;
display: flex;
flex-direction: row;
height: 20px;
line-height: 20px;
}
ul li:nth-child(1),ul li:nth-child(3){
width: 40px;
text-align:center;
flex-grow: 0;
}
ul li:nth-child(2){
width: 6px;
padding: 5px;
border-radius: 3px;
flex-grow: 1;
}
.chose{
height: 8px;
border-radius: 3px;
background-color: green;
margin: 1px 0;
width: 0px;
}
.body p{
width: 180px;
height: 40px;
text-align: center;
line-height: 40px;
}
.floor{
height: 60px;
padding: 20px;
text-align: center;
display: flex;
flex-direction: row;
flex-grow: 0;
align-items: center;
}
.floor p{
width:80px ;
transition: color 1000ms,background-color 1000ms;
}
.floor p:hover{
background-color: green;
color: white;
}
3氓辣、JS程序如下：核心為audio部分屬性筛婉；
window.onload=function () {
var pop=document.getElementById('floor').getElementsByTagName('p');
var video=document.getElementsByTagName('audio');
var Timer=document.getElementById('Timer').getElementsByTagName('li');
var chose=document.getElementById('chose');
var l=document.getElementById('l');
pop[1].addEventListener('click',Music,false);
video[0].addEventListener('canplay',Timecontrol,false) //監(jiān)聽音樂就緒后動(dòng)作改變癞松！
function Music() { //此函數(shù)判斷音樂是否播放响蓉！
if(video[0].paused){
video[0].play();
pop[1].innerText="Close";
}
else{
video[0].pause();
pop[1].innerText="Open";
}
}
function Timecontrol(){ //實(shí)現(xiàn)音樂進(jìn)度條及音樂播放時(shí)間；
var j=0;
var long=video[0].duration;
var longs=parseInt(long/60)+':'+parseInt(long%60);
var settimer=null;
clearInterval(settimer);
var settimer=setInterval(loading,1000);
function loading(){
var currenttimer=video[0].currentTime;
if(currenttimer>long){
clearInterval(settimer);
}
else {
var j=(currenttimer/long).toFixed(2)*90;
if(video[0].paused&¤ttimer==0){
Timer[2].innerText="";
}
else{
Timer[2].innerText=longs;
var rot=j*8;
console.log(rot);
l.style.webkitTransform= "rotate("+rot +"deg)";
}
var start=parseInt(currenttimer/60);
var end=parseInt(currenttimer%60);
if(end<10){
end='0'+end;
}
var start=start+':'+end;
Timer[0].innerText=start;
chose.style.width=j+'px';
}
}
}
}
4、下一部分實(shí)現(xiàn)重點(diǎn)：
A想幻、歌曲切換功能；
B闹究、完善背景圖片隨音樂節(jié)奏旋轉(zhuǎn)功能食店；
C赏寇、嘗試增加各音階的播放動(dòng)畫价认；
D、初步的Python爬蟲爬取學(xué)習(xí)筆記及實(shí)例用踩；
---以上內(nèi)容捶箱，預(yù)計(jì)在5/30日更新，下一篇為JS基本緩沖動(dòng)畫荠锭；
