html5 audio整理

冰影浴火發表於2018-04-21
HTML

新建audio物件

  1. <audio src='music.mp3'></audio>標籤
  2. audio = new Audio('music.mp3')

屬性

autoplay

是否載入完成後立刻播放

audio.autoplay = true | false(預設，載入後不立即播放)
複製程式碼

buffered

audio.buffered
複製程式碼

返回TimeRanges物件，表示使用者的音訊緩衝範圍。

緩衝範圍指的是已緩衝音訊的時間範圍。如果使用者在音訊中跳躍播放，會得到多個緩衝範圍。

TimeRange: {
  length -獲得音視訊中已緩衝範圍的數量
  start() - 獲得某個已緩衝範圍的開始位置
  end() -獲得某個已緩衝範圍的結束位置
}
複製程式碼

controls

audio.controls = true | false(預設，不顯示控制元件)
複製程式碼

設定或返回瀏覽器應當顯示標準的音視訊控制元件。

注：需要先建立audio標籤。

currentSrc

audio.currentSrc
複製程式碼

返回當前音訊的 URL

currentTime

audio.currentTime = Number(以秒記的數字)
複製程式碼

設定或返回音訊播放的當前位置（以秒計）。

duration

audio.duration
複製程式碼

返回當前音訊的長度，以秒計。如果未設定音訊，則返回 NaN。

ended

audio.ended
複製程式碼

返回音訊是否結束。

loop

audio.loop = true | false(預設，不迴圈)
複製程式碼

設定或返回音訊是否應該在結束時再次播放。

muted

audio.muted = true | false(預設，表示開啟聲音)
複製程式碼

設定或返回音訊是否應該被靜音（關閉聲音）。

networkState

audio.networkState
複製程式碼

返回音訊的當前網路狀態。

返回值：

  • 0 = NETWORK_EMPTY - 音訊尚未初始化
  • 1 = NETWORK_IDLE - 音訊是活動的且已選取資源，但並未使用網路
  • 2 = NETWORK_LOADING - 瀏覽器正在下載資料
  • 3 = NETWORK_NO_SOURCE - 未找到音訊來源

paused

audio.paused
複製程式碼

返回音訊是否已暫停。

readyState

audio.readyState
複製程式碼

返回音訊的當前就緒狀態。就緒狀態指示音訊是否已準備好播放。

返回值：

  • 0 = HAVE_NOTHING - 沒有關於音訊/視訊是否就緒的資訊
  • 1 = HAVE_METADATA - 關於音訊/視訊就緒的後設資料
  • 2 = HAVE_CURRENT_DATA - 關於當前播放位置的資料是可用的，但沒有足夠的資料來播放下一幀/毫秒
  • 3 = HAVE_FUTURE_DATA - 當前及至少下一幀的資料是可用的
  • 4 = HAVE_ENOUGH_DATA - 可用資料足以開始播放

src

audio.src = URL
複製程式碼

設定或返回音訊的當前來源。

volume

audio.volume = volumevalue(介於0-1之間的數字)
複製程式碼

設定或返回音訊的當前音量。

方法

canPlayType()

audio.canPlayType(type)
複製程式碼

檢測瀏覽器是否能播放指定的音訊型別。

返回值：

  • "probably" - 最有可能支援
  • "maybe" - 可能支援
  • "" - （空字串）不支援

play()

audio.play()
複製程式碼

開始播放當前的音訊。

pause()

audio.pause()
複製程式碼

停止（暫停）當前播放的音訊。

事件

當音訊處於載入過程中時，會依次發生以下事件：

  • loadstart當瀏覽器開始查詢音訊時
  • durationchange當音訊的時長已更改時
  • loadedmetadata當瀏覽器已載入音訊的後設資料時
  • loadeddata當瀏覽器已載入音訊的當前幀時
  • progress當瀏覽器正在下載音訊時
  • canplay當瀏覽器可以播放音訊時
  • canplaythrough當瀏覽器可在不因緩衝而停頓的情況下進行播放時

其它事件：

  • abort當音訊的載入已放棄時
  • emptied當目前的播放列表為空時
  • ended當目前的播放列表已結束時
  • error當在音訊載入期間發生錯誤時
  • ause當音訊已暫停時
  • play當音訊已開始或不再暫停時
  • playing當音訊在已因緩衝而暫停或停止後已就緒時
  • ratechange當音訊的播放速度已更改時
  • seeked當使用者已移動/跳躍到音訊中的新位置時
  • seeking當使用者開始移動/跳躍到音訊中的新位置時
  • stalled當瀏覽器嘗試獲取媒體資料，但資料不可用時
  • suspend當瀏覽器刻意不獲取媒體資料時
  • timeupdate當目前的播放位置已更改時
  • volumechange當音量已更改時
  • waiting當視訊由於需要緩衝下一幀而停止

相關文章