API

屬性

1. audioObject

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

方法1:

 <audio id="music" src="http://cloud.hunger-valley.com/music/玫瑰.mp3">你的瀏覽器不支持喔！</audio>
<script>
var audioObject = document.querySelector('#music')
</script>

方法2

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

2. audioObject.play()

開始播放

3. audioObject.pause()

暫停播放

4. audioObject.autoPlay

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

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

設(shè)置或者獲取音樂地址

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

6. audioObject.volume

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

audioObject.volume = 0.5
audioObject.volume = 1

console.log(audioObject.volume)

7. audioObject.loop

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

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

8. audioObject.duration

獲取音樂長度，單位為秒

console.log(audioObject.duration)

9. audioObject.currentTime

設(shè)置或者獲取播放時間

console.log(audioObject.currentTime)

10. audioObject.ended

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

事件

1. playing

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

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

2. pause

當(dāng)音樂暫停時和結(jié)束時觸發(fā)

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

3. ended

當(dāng)音樂結(jié)束時觸發(fā)

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

3. timeupdate

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

//如下代碼設(shè)置 每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)
  }
}

4. volumechange

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

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

Demo

展示