API

1. audioObject

創建或者獲取 audio 對象，可以通過以下兩種方法

• 方法1

  <audio id="music" src="http://cloud.hunger-valley.com/music/玫瑰.mp3">你的瀏覽器不支持哦</audio>

  <script type="text/javascript">
    var audioObject = document.querySelector("#music")
  </script>

• 方法2

var audioObject = new Audio("http://cloud.hunger-valley.com/music/玫瑰.mp3")

2. audioObject.play()

開始播放 audioObject.play()

3. audioObject.pause()

暫停播放 audioObject.pause()

4. audioObject.autoPlay

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

audioObject.autoPlay = true  //設置為自動播放，下次更換 audioObject.src 后會自動播放音樂
audioObject.autoPlay = false //設置不自動播放
console.log(audioObject.autoPlay) // true or false，查看當前的自動播放狀態

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

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

事件

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')
})

4. 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)
  }
}

5. volumechange

當音量改變時觸發

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