實現一個簡單音樂播放器

作的一個簡單的半成品播放器

1、需求分析

一、寫靜態頁面
二、經過getMusicList函數用Ajax獲取歌曲數據列表musiclist
三、經過loadMusic函數實現歌曲的播放功能
四、根據獲取的歌曲數據來設置歌名、做者和背景圖片
五、設置進度條隨歌曲進度而實時變動，經過給audio對象綁定ontimeupdate事件來實現
六、設置歌曲時間隨歌曲進度而實時更新，經過給audio對象綁定ontimeupdate或者setimeInval來實現
七、設置暫停鍵的功能
八、設置下一首的功能
九、設置上一首的功能
十、設置歌曲播放完成後，自動播放下一首的功能
十一、設置點擊進度條切換歌曲進度的功能

2、解析對象

currentIndex 歌曲的當前下標
audio 當前歌曲對象
MusicList 歌曲數據對象
musicObj 當前歌曲對象 loadMusic函數傳遞的參數

3、前提知識（audio對象的屬性）

一、audioObject

建立或者獲取的audio對象，可經過如下兩種方式獲得

方法1:

<audio id="music" src="http://cloud.hunger-valley.co...;>你的瀏覽器不支持喔！</audio>
<script>
var audioObject = document.querySelector('#music')
</script>
方法2

var audioObject = new Audio('http://cloud.hunger-valley.co...')

二、audioObject.play()

開始播放

三、audioObject.pause()

暫停播放

四、audioObject.autoPlay

設置或者獲取自動播放狀態

audioObject.autoPlay = true //設置爲自動播放，下次更換 audioObject.src 後會自動播放音樂
audioObject.autoPlay = false //設置不自動播放
console.log(audioObject.autoPlay)

五、audioObject.src

設置或者獲取音樂地址

audioObject.src = "http://cloud.hunger-valley.com/music/ifyou.mp3"
console.log(audioObject.src)

六、audioObject.volume

設置或者獲取音量，最大值爲1，0爲靜音

audioObject.volume = 0.5
audioObject.volume = 1
console.log(audioObject.volume)

七、audioObject.loop

設置或者獲取循環狀態

audioObject.loop = true
console.log(audioObject.loop)

八、audioObject.duration

獲取音樂長度，單位爲秒

console.log(audioObject.duration)

九、 audioObject.currentTime

設置或者獲取播放時間

console.log(audioObject.currentTime)

十、 audioObject.ended

判斷音樂是否播放完畢，只讀屬性

十一、audio.paused

表示音頻對象是否處於暫停狀態，能夠用來設置暫停鍵

4、前提知識（audio對象的事件）

一、playing

當音樂開始播放，暫停後從新開始播放，設置currentTime後開始播放時觸發

audioObject.addEventListener('playing', function(){
console.log('playing')
})

二、pause

當音樂暫停時和結束時觸發

audioObject.addEventListener('pause', function(){
console.log('pause')
})

三、ended

當音樂結束時觸發

audioObject.addEventListener('ended', function(){
console.log('ended')
})

三、timeupdate

當currentTime更新時會觸發timeupdate事件,這個事件的觸發頻率由系統決定，可是會保證每秒觸發4-66次（前提是每次事件處理不會超過250ms.

//以下代碼設置 每1秒左右執行一次
audioObject.shouldUpdate = true
audioObject.ontimeupdate = function(){
var _this = this
if(_this.shouldUpdate) {

//do something
 console.log('update')
 _this.shouldUpdate = false
setTimeout(function(){
  _this.shouldUpdate = true
}, 1000)

}
}

四、volumechange

當音量改變時觸發

audioObject.onvolumechange = function(){
  console.log('volumechange')
}

5、遇到的坑

一、設置progress-now的寬度隨着播放時間變化而變化

我寫成的事這樣

audio.ontimeupdate=function(){
        $('.progress-now').style.width=(this.currentTime/this.duration)*(getComputedStyle($('.bar')).width)
    }

實際上應該寫成百分比就能夠了

audio.ontimeupdate=function(e){
$('.progress-now').style.width = (this.currentTime/this.duration)*100 + '%'}

二、兩種方式設置歌曲時間隨進度變化

1）設置ontimeupdate來設置，每秒觸發4-66次，時間變化不均勻

audio.ontimeupdate=function(e){
   $('.progress-now').style.width = (this.currentTime/this.duration)*100 + '%'
   var min=Math.floor(this.currentTime/60)
   var sec= Math.floor(this.currentTime %60)>9?(Math.floor(this.currentTime%60)):('0'+Math.floor(this.currentTime%60))
   $('.time').innerText=''+min+':'+sec
 }

2）經過setInterval來設置，每秒一次，時間變化均勻
注意：這個函數不能寫成this.currentTime %60，否則輸出會變成NaN。要寫成audio.currentTime。我猜測應該是和set intervalthis的值會發生改變。以後填坑

audio.onplay=function(){
       clock =setInterval(function(){
       var min=Math.floor(audio.currentTime/60)
       var sec= Math.floor(audio.currentTime %60)>9?(Math.floor(audio.currentTime%60)):('0'+Math.floor(audio.currentTime%60))
       $('.time').innerText=''+min+':'+sec
 
         })
     }
audio.onpause=function(){
        clearInterval(clock)
    }

注意:不能寫成 var clock，clock必須是全局變量，沒辦法傳遞參數到clearInterval(clock),會報如下錯

三、作寬度相除，須要加上parseInt將字符串轉換成數值

否則輸出奇怪的數值

$('.musicbox .bar').onclick=function(e){
         var percent=e.offsetX/ parseInt(getComputedStyle(this).width)
         audio.currentTime= audio.duration*percent
         //不要忘記了parseInt，把寬度轉換爲數值
     }

四、下一首的下標實現增長循環

currentIndex = (++currentIndex)%MusicList.length

五、上一首的下標實現自減循環

currentIndex = ((--currentIndex)+MusicList.length)%MusicList.length

六、GitHub不支持http協議

GitHub是https協議的，我在代碼裏面寫了http協議，就報錯了，須要所有改爲https。

七、須要把引入js文件的代碼放在最後，否則會報錯

Uncaught TypeError: Cannot set property 'onclick' of null。
緣由是加載到onclick這個代碼的時候，發現dom結構尚未加載好，因此要把引入js文件的代碼放在html的最後

八、引入js文件的路徑錯誤

本地測試沒有問題，可是上傳github後出現了引入js錯誤，發現是路徑錯誤，須要加上./表示相對於當前的文件夾中的js和css

6、預覽連接

https://0612bamboo.github.io/...