/

HTML `audio` 標籤

HTML audio 標籤

瞭解使用 HTML audio 標籤的基本知識

audio 標籤允許您在 HTML 頁面中嵌入音訊內容。

此元素可以以流式傳輸音訊，也可以使用 src 屬性引用音訊來源，例如：

1
<audio src="file.mp3" />

預設情況下，瀏覽器不會為此元素顯示任何控制項。這意味著只有在設置為自動播放（稍後會講到）時，音訊才會播放，且用戶無法看到如何停止它、控制音量或移動到音軌的其他位置。

要顯示內建的控制項，您可以添加 controls 屬性：

1
<audio src="file.mp3" controls />

控制項可以具有自訂外觀。

您可以使用 type 屬性指定音訊檔案的 MIME 類型。如果未設置，瀏覽器將嘗試自動確定類型：

1
<audio src="file.mp3" controls type="audio/mpeg" />

音訊檔案默認不會自動播放。添加 autoplay 屬性可自動播放音訊：

1
<audio src="file.mp3" controls autoplay />

注意：移動瀏覽器不允許自動播放

如果設置了 loop 屬性，則音訊播放會在 0:00 繼續重新播放，否則如果未存在該屬性，音訊會在檔案結束時停止播放：

1
<audio src="file.mp3" controls autoplay loop />

您也可以使用 muted 屬性將音訊檔案設置為無聲播放（對於這樣做的有用性未知）：

1
<audio src="file.mp3" controls autoplay loop muted />

CORS

音訊受到 CORS 的限制，除非您在服務器端允許它，否則無法跨域播放音訊檔案。

預加載音訊

如果未設置 autoplay，則規範指定瀏覽器只會下載音訊的元資料（例如，獲取長度），而不會下載音訊本身。

您可以使用以下方法強制預加載音訊：

1
<audio src="song.mp3" preload="auto" />

如果不支援 audio 標籤

audio 標籤非常受支援，包括 IE9，在現今的環境中通常不需要使用占位文字，但我們仍然有這個選項。您只需添加結束標籤，並在開始和結束標籤之間插入文字：

1
<audio src="song.mp3">不支援音訊標籤</audio>

添加原生控制項

您可以選擇要求瀏覽器顯示一組控制項，而不是在背景中自動播放音訊，使用者可以在希望時播放音訊，獲得長度的指示，設置音量並導覽音軌：

1
<audio src="song.mp3" controls />

這是在 Chrome 中的顯示效果：

Audio element

您可以使用 CSS 樣式化控制項，但超出了本介紹的範圍。

添加多個來源

瀏覽器可以執行一種音訊編解碼器，但無法執行另一種。也許您希望使用半段檔案大小的新標準，但仍然希望支援舊版瀏覽器。

您可以使用 source 標籤來實現這一目標：

1
2
3
4
5
<audio controls>
 <source src="song.opus" type="audio/ogg; codecs=opus"/>
 <source src="song.ogg" type="audio/ogg; codecs=vorbis"/>
 <source src="song.mp3" type="audio/mpeg"/>
</audio>

操作音訊事件

我們可以使用 JavaScript 監聽每個 audio 元素的事件，以創建有趣的專案和介面。有很多不同的事件可供使用。

play 事件在音訊播放開始時被觸發：

1
2
3
document.querySelector('video').addEventListener('play', () => {
 alert('音訊正在播放！！！')
})

您也可以直接在 HTML 元素上使用 on<event> 屬性直接添加此事件（與其他事件一樣）：

1
<audio src="song.mp3" controls onplay="playing()" />
1
2
3
const playing = () => {
 alert('音訊正在播放！！！')
}

以下是一些您可以監聽的事件：

  • play 音訊開始播放
  • pause 音訊被暫停
  • ended 音訊播放完成
  • timeupdate 使用者與回放時間軸進行交互，快進/倒帶
  • volumechange 使用者更改了音量

還有很多與音訊加載相關的事件，您可以在 MDN 上找到完整的事件列表。