HTML Audio 常用方法

基本用法

<audio src="./music.mp3" controls></audio>

屬性

autoplay

布林值 / 是否自動播放

<audio src="./music.mp3" controls autoplay></audio>

document.querySelector('audio').autoplay = true

loop

布林值 / 是否循環播放

<audio src="./music.mp3" controls loop></audio>

document.querySelector('audio').loop = true

muted

布林值 / 是否開啟靜音

<audio src="./music.mp3" controls muted></audio>

document.querySelector('audio').muted = true

preload
```
<audio controls src="./music.mp3" preload="auto"></audio>
```
```
document.querySelector('audio').preload = 'auto'
```
音頻加載前的策略
- none
  
  點擊播放按鈕前不加載任何信息
- metadata
  
  下載音頻的 meta 信息，包含長度，類型，作者等
- auto
  
  會嘗試下載整個音頻
controls

布林值 / 是否顯示音頻控制器

currentTime

可讀可寫的屬性，用來設置或獲取當前音頻播放的時長，單位為秒

// 取得音頻已播放時長，若尚未播放則返回 0
const currentTime = document.querySelector('audio').currentTime

// 設置音頻至希望播放的時間點
document.querySelector('audio').currentTime = 90

volume

可讀可寫的屬性，用來設置或獲取音頻的音量大小，範圍為 0 - 1

document.querySelector('audio').volume = 0.5

playbackRate

可讀可寫的屬性，用來設置或獲取當前音頻的播放速度

document.querySelector('audio').playbackRate = 1.5

paused

只讀屬性，表當前音頻是否處於暫停狀態

// 未播放或播放暫停都會返回 true
console.log(document.querySelector('audio').paused)

方法

play()

播放音頻

document.querySelector('audio').play()

pause()

暫停音頻

document.querySelector('audio').pause()

音頻加載事件

loadstart

告訴我們加載過程已開始，瀏覽器正連接至媒體

durationchange

如果想儘快知道音頻的播放時長，則 durationchange 事件非常管用，因為音頻默認 duration 初始值是 NaN，當準確時長返回時會觸發 durationchange，此時我們就可以快速取得音頻播放時間。

loadedmetadata

當第一個音頻字節數據到達時，會觸發 loadeddata 事件。雖然播放頭已經就位，但還沒有準備好播放

progress

progress 事件在音頻仍然在下載中時觸發，通常各種 loading 效果的顯示就是在這個事件中

canplay

當音頻可播放時會觸發 canplay 事件

我們在自定義音頻播放器的時候，可以默認把一些按鈕 disabled 禁用，等可以播放的時候再恢復為 enabled，此時就可以使用 canplay 事件

canplaythrough

canplaythrough 事件在音頻可以從頭播放到尾時候觸發。這種情況包括音頻已經從頭到尾加載完畢了，或者瀏覽器認為一定可以按時下載，不會發生緩衝停止

音頻事件加載順序

loadstart > progress > durationchange > loadedmetadata > canplay > canplaythrough

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <audio controls src="./music.mp3"></audio>

    <script>
      const audio = document.querySelector('audio')

      audio.addEventListener('loadstart', () => {
        console.log('loadstart')
      })

      audio.addEventListener('progress', () => {
        console.log('progress')
      })

      audio.addEventListener('durationchange', () => {
        console.log('durationchange')
      })

      audio.addEventListener('loadedmetadata', () => {
        console.log('loadedmetadata')
      })

      audio.addEventListener('canplay', () => {
        console.log('canplay')
      })

      audio.addEventListener('canplaythrough', () => {
        console.log('canplaythrough')
      })
    </script>
  </body>
</html>

加載中斷事件

suspend

即使文件尚未完全下載，也不再拉取媒體數據

abort

不是因為出錯而導致的媒體數據下載中止

error

媒體下載過程中錯誤。例如突然無網絡了。或者文件地址不對

emptied

媒體緩衝區已被清空，可能是由於錯誤或調用了 load() 方法重新加載

stalled

媒體數據意外地不再可用