音樂播放器總結(jié)

音樂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ù)字裝換為字符串


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容