做的一個簡單的半成品播放器
一、需求分析
1、寫靜態頁面
2、通過getMusicList函數用Ajax獲取歌曲數據列表musiclist
3、通過loadMusic函數實現歌曲的播放功能
4、根據獲取的歌曲數據來設置歌名、作者和背景圖片
5、設置進度條隨歌曲進度而實時變更，通過給audio對象綁定ontimeupdate事件來實現
6、設置歌曲時間隨歌曲進度而實時更新，通過給audio對象綁定ontimeupdate或者setimeInval來實現
7、設置暫停鍵的功能
8、設置下一首的功能
9、設置上一首的功能
10、設置歌曲播放完成後，自動播放下一首的功能
11、設置點擊進度條切換歌曲進度的功能
二、解析對象
currentIndex 歌曲的當前下標
audio 當前歌曲對象
MusicList 歌曲數據對象
musicObj 當前歌曲對象 loadMusic函數傳遞的參數
三、前提知識（audio對象的屬性）
1、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...')
2、audioObject.play()
開始播放
3、audioObject.pause()
暫停播放
4、audioObject.autoPlay
設置或者獲取自動播放狀態
audioObject.autoPlay = true //設置爲自動播放，下次更換 audioObject.src 後會自動播放音樂
audioObject.autoPlay = false //設置不自動播放
console.log(audioObject.autoPlay)
5、audioObject.src
設置或者獲取音樂地址
audioObject.src = "http://cloud.hunger-valley.com/music/ifyou.mp3"
console.log(audioObject.src)
6、audioObject.volume
設置或者獲取音量，最大值爲1，0爲靜音
audioObject.volume = 0.5
audioObject.volume = 1
console.log(audioObject.volume)
7、audioObject.loop
設置或者獲取循環狀態
audioObject.loop = true
console.log(audioObject.loop)
8、audioObject.duration
獲取音樂長度，單位爲秒
console.log(audioObject.duration)
9、 audioObject.currentTime
設置或者獲取播放時間
console.log(audioObject.currentTime)
10、 audioObject.ended
判斷音樂是否播放完畢，只讀屬性
11、audio.paused
表示音頻對象是否處於暫停狀態，可以用來設置暫停鍵
四、前提知識（audio對象的事件）
1、playing
當音樂開始播放，暫停後重新開始播放，設置currentTime後開始播放時觸發
audioObject.addEventListener('playing', function(){
console.log('playing')
})
2、pause
當音樂暫停時和結束時觸發
audioObject.addEventListener('pause', function(){
console.log('pause')
})
3、ended
當音樂結束時觸發
audioObject.addEventListener('ended', function(){
console.log('ended')
})
3、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)}
}
4、volumechange
當音量改變時觸發
audioObject.onvolumechange = function(){
console.log('volumechange')
}五、遇到的坑
1、設置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 + '%'}2、兩種方式設置歌曲時間隨進度變化
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),會報以下錯
3、做寬度相除，需要加上parseInt將字符串轉換成數值
不然輸出奇怪的數值
$('.musicbox .bar').onclick=function(e){
var percent=e.offsetX/ parseInt(getComputedStyle(this).width)
audio.currentTime= audio.duration*percent
//不要忘記了parseInt，把寬度轉換爲數值
}4、下一首的下標實現增加循環
currentIndex = (++currentIndex)%MusicList.length5、上一首的下標實現自減循環
currentIndex = ((--currentIndex)+MusicList.length)%MusicList.length6、GitHub不支持http協議
GitHub是https協議的，我在代碼裏面寫了http協議，就報錯了，需要全部改成https。
7、需要把引入js文件的代碼放在最後，不然會報錯
Uncaught TypeError: Cannot set property 'onclick' of null。
原因是加載到onclick這個代碼的時候，發現dom結構還沒有加載好，所以要把引入js文件的代碼放在html的最後
8、引入js文件的路徑錯誤
本地測試沒有問題，但是上傳github後出現了引入js錯誤，發現是路徑錯誤，需要加上./表示相對於當前的文件夾中的js和css
