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

1、寫靜態(tài)頁面
2、通過getMusicList函數(shù)用Ajax獲取歌曲數(shù)據(jù)列表musiclist
3、通過loadMusic函數(shù)實現(xiàn)歌曲的播放功能
4、根據(jù)獲取的歌曲數(shù)據(jù)來設置歌名、作者和背景圖片
5、設置進度條隨歌曲進度而實時變更，通過給audio對象綁定ontimeupdate事件來實現(xiàn)
6、設置歌曲時間隨歌曲進度而實時更新，通過給audio對象綁定ontimeupdate或者setimeInval來實現(xiàn)
7、設置暫停鍵的功能
8、設置下一首的功能
9、設置上一首的功能
10、設置歌曲播放完成后，自動播放下一首的功能
11、設置點擊進度條切換歌曲進度的功能

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

創(chuàng)建或者獲取的audio對象，可通過以下兩種方式得到

方法1:

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

開始播放

暫停播放

設置或者獲取自動播放狀態(tài)

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

設置或者獲取音樂地址

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

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

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

設置或者獲取循環(huán)狀態(tài)

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

獲取音樂長度，單位為秒

console.log(audioObject.duration)

設置或者獲取播放時間

console.log(audioObject.currentTime)

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

表示音頻對象是否處于暫停狀態(tài)，可以用來設置暫停鍵

當音樂開始播放，暫停后重新開始播放，設置currentTime后開始播放時觸發(fā)

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

當音樂暫停時和結束時觸發(fā)

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

當音樂結束時觸發(fā)

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

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

//如下代碼設置 每1秒左右執(zhí)行一次
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)

}
}

當音量改變時觸發(fā)

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

我寫成的事這樣

 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來設置，每秒觸發(fā)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來設置，每秒一次，時間變化均勻
注意：這個函數(shù)不能寫成this.currentTime %60，不然輸出會變成NaN。要寫成audio.currentTime。我猜想應該是和set intervalthis的值會發(fā)生改變。之后填坑

 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必須是全局變量，沒辦法傳遞參數(shù)到clearInterval(clock),會報以下錯

不然輸出奇怪的數(shù)值

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

currentIndex = (++currentIndex)%MusicList.length

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

GitHub是https協(xié)議的，我在代碼里面寫了http協(xié)議，就報錯了，需要全部改成https。

Uncaught TypeError: Cannot set property "onclick" of null。
原因是加載到onclick這個代碼的時候，發(fā)現(xiàn)dom結構還沒有加載好，所以要把引入js文件的代碼放在html的最后

本地測試沒有問題，但是上傳github后出現(xiàn)了引入js錯誤，發(fā)現(xiàn)是路徑錯誤，需要加上./表示相對于當前的文件夾中的js和css

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