音樂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

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

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

2. pause

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

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

3. ended

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

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

3. timeupdate

當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

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

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

• HTMLElement. hidden 是一個 Boolean
  類型，如果想要隱藏文檔，值設(shè)置為 true，否則值設(shè)置為
  false
  這是完全不同于使用 CSS 屬性 display來控制一個元素的可見性 。 hidden 屬性應(yīng)用于所有的展現(xiàn)模式，并且不應(yīng)該用來隱藏用戶直接訪問的內(nèi)容。

• getComputedStyle 獲取元素樣式-----
  var element = document.querySelector(element)
  getComputedStyle(element).width === xxxpx parseInt將字符串轉(zhuǎn)為數(shù)字

• element.style 設(shè)置element的css的屬性（eg:element.style.width = 111px）

• e.offsetX 當前鼠標在element上的橫坐標坐標

• e.offsetY當前鼠標在element上的縱坐標坐標

• 111 + '' = '111' 將數(shù)字裝換為字符串