<audio>：嵌入音訊元素

上面的範例展示了 <audio> 元素的簡單用法。與 <img> 元素類似，我們在 src 屬性中包含要嵌入的媒體的路徑；我們可以包含其他屬性來指定信息，例如我們是否要自動播放和循環播放，是否要顯示瀏覽器的默認音訊控制項等。

在開始與結束的 <audio></audio> 標籤中的內容將作為在不支援該元素的瀏覽器中的回退顯示。

此元素的屬性包括全域屬性。

autoplay

一個布林屬性：如果指定，音訊將會在能夠開始播放時自動開始播放，而不需要等待整個音訊文件下載完成。

備註：自動播放音訊（或帶有音訊軌道的影片）的網站對用戶來說可能是一種不愉快的體驗，因此應盡可能避免。如果必須提供自動播放功能，你應該使其成為選擇加入的（需要用戶明確啟用）。然而，在創建源將在稍後由用戶控制的媒體元素時，這可能很有用。有關如何正確使用自動播放的其他信息，請參見我們的自動播放指南。

controls

如果存在此屬性，瀏覽器將提供控件，允許用戶控制音訊播放，包括音量、搜索和暫停/恢復播放。

controlslist

當指定此屬性時，該 controlslist 屬性將幫助瀏覽器選擇在瀏覽器顯示自己的一組控件時（即，當指定了 controls 屬性時）為 audio 元素顯示什麼控件。

允許的值包括 nodownload、nofullscreen 和 noremoteplayback。

crossorigin

此列舉屬性指示是否使用 CORS 來獲取相關音訊文件。啟用 CORS 的資源可以在 <canvas> 元素中重複使用而不會被汙染。允許的值有：

anonymous

發送沒有憑據的跨源請求。換句話說，它發送了沒有 cookie、X.509 憑證或執行 HTTP 基本身份驗證的 Origin: HTTP 標頭。如果伺服器沒有向源站提供憑證（通過不設置 Access-Control-Allow-Origin: HTTP 標頭），資源將是汙染的，並限制其使用。

use-credentials

使用憑證發送跨源請求。換句話說，它使用帶有 cookie、憑證或執行 HTTP 基本身份驗證的 Origin: HTTP 標頭。如果伺服器沒有向源站提供憑證（通過 Access-Control-Allow-Credentials: HTTP 標頭），資源將是汙染的，並限制其使用。

當未指定時，該資源將不使用 CORS 請求進行提取（即不發送 Origin: HTTP 標頭），從而防止其在 <canvas> 元素中的非汙染使用。如果無效，則處理為使用列舉關鍵字 anonymous。有關其他信息，請參見 CORS 設置屬性。

disableremoteplayback

一個布林屬性，用於禁用使用有線（HDMI、DVI 等）和無線技術（Miracast、Chromecast、DLNA、AirPlay 等）連接的設備的遠程播放功能。更多信息請參見此提議的規範。

在 Safari 中，你可以使用 x-webkit-airplay="deny" 作為回退。

loop

一個布林屬性：如果指定，音訊播放器將在達到音訊結束時自動回到開頭。

muted

一個布林屬性，指示音訊是否初始靜音。其默認值為 false。

preload

此列舉屬性旨在為瀏覽器提供有助於獲得最佳用戶體驗的提示。它可能具有以下值之一：

• none：表示不應預先載入音訊。
• metadata：表示僅應提取音訊後設資料（例如長度）。
• auto：表示即使用戶不預期使用它，也可以下載整個音訊文件。
• 空字符串：auto 值的同義詞。

默認值對於每個瀏覽器是不同的。規範建議將其設置為 metadata。

備註：

• autoplay 屬性優先於 preload。如果指定了 autoplay，瀏覽器顯然需要開始下載音訊以進行播放。
• 規範並不強制要求瀏覽器遵循此屬性的值；它僅僅是一個提示。

src

要嵌入的音訊的 URL。這受到 HTTP 存取控制的限制。這是可選的；你可以在音訊塊中使用 <source> 元素來指定要嵌入的音訊。

不同的瀏覽器不支援相同的檔案類型和音訊編解碼器，你可以在嵌套的 <source> 元素中提供多個來源，然後瀏覽器將使用它了解的第一個：

<audio controls>
  <source src="myAudio.mp3" type="audio/mpeg" />
  <source src="myAudio.ogg" type="audio/ogg" />
  <p>
    Download <a href="myAudio.mp3" download="myAudio.mp3">MP3</a> or
    <a href="myAudio.ogg" download="myAudio.ogg">OGG</a> audio.
  </p>
</audio>

我們提供了一個全面詳盡的媒體檔案類型指南和可以在其中使用的音訊編解碼器。還提供了一個關於支援的影片編解碼器的指南。

其他使用注意事項：

• 如果你沒有指定 controls 屬性，則音訊播放器將不包括瀏覽器的默認控制項。但是，你可以使用 JavaScript 和 HTMLMediaElement API 創建自己的自定義控制項。
• 為了對音訊內容進行精確控制，HTMLMediaElement 會觸發許多不同的事件。這也提供了一種監視音訊提取過程的方式，以便你可以查看錯誤或檢測何時可以開始播放或操作它的數據量。
• 你還可以使用 Web Audio API 直接從 JavaScript 代碼生成和操作音訊流，而不是流式媒體現有的音訊檔案。
• <audio> 元素無法像 <video> 元素那樣與字幕或標題關聯。有關一些有用的信息和解決方法，請參見 Ian Devlin 的 WebVTT 和音訊。
• 為了測試在支援該元素的瀏覽器中的回退內容，你可以將 <audio> 替換為一個不存在的元素，例如 <notanaudio>。

有關使用 HTML <audio> 的一般信息，請參見初學者教程影片和音訊內容。

除非指定了 controls 屬性，否則 <audio> 元素本身沒有內在的視覺輸出；在這種情況下，將顯示瀏覽器的默認控制項。

默認控制項的 display 屬性默認為 inline，通常最好將其值設置為 block，以提高對定位和布局的控制，除非你希望其置於文本塊或類似的內容中。

你可以使用影響整個區塊的屬性來設置默認控制項的樣式，例如可以給它設置 border 和 border-radius、padding、margin 等。但是，你無法設置音訊播放器內的個別組件的樣式（例如更改按鈕大小或圖標，更改字體等），且不同瀏覽器的控制項不同。

為了在各種瀏覽器中獲得一致的外觀和感覺，你需要創建自定義控制項；這些可以以你想要的方式標記和設置樣式，然後可以使用 JavaScript 和 HTMLMediaElement API 來連接其功能。

影片播放器樣式基礎知識提供了一些有用的樣式技巧——雖然它是在 <video> 的上下文中撰寫的，但其中的許多內容同樣適用於 <audio>。

你可以使用 addtrack 和 removetrack 事件檢測音軌何時添加到和從 <audio> 元素中移除。但是，這些事件並不直接發送到 <audio> 元素本身。相反，它們被發送到與添加到元素中的音軌類型相對應的 <audio> 元素的 HTMLMediaElement 內的軌道列表對象相關：

HTMLMediaElement.audioTracks

包含媒體元素的所有音軌的 AudioTrackList。你可以對此對象添加 addtrack 監聽器，以在向元素添加新音軌時收到通知。

HTMLMediaElement.videoTracks

對此 VideoTrackList 對象添加 addtrack 監聽器，以在向元素添加影片軌時收到通知。

HTMLMediaElement.textTracks

對此 TextTrackList 添加 addtrack 事件監聽器，以在向元素添加新文本軌時收到通知。

例如，要檢測音軌何時添加到或從 <audio> 元素中移除，你可以使用以下代碼：

const elem = document.querySelector("audio");

elem.audioTrackList.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTrackList.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

這段程式碼監聽音軌添加到元素中，以及從元素中移除，並呼叫一個假想的函式來在軌道編輯器中註冊和移除軌道，以更新編輯器中的可用軌道清單。

你也可以使用 addEventListener() 監聽 addtrack 和 removetrack 事件。

以下範例展示了 <audio> 元素簡單使用來播放一個 OGG 檔案。由於 autoplay 屬性，它將自動播放——如果網頁有權限進行的話並且還包括回退內容。

<!-- Simple audio playback -->
<audio src="AudioTest.ogg" autoplay>
  <a href="AudioTest.ogg" download="AudioTest.ogg">Download OGG audio</a>.
</audio>

有關何時可以使用自動播放、如何取得使用自動播放的權限，以及使用自動播放的適當時機，請參見我們的自動播放指南。

此範例使用嵌套的 <source> 元素的 src 屬性來指定要嵌入的音訊軌，而不是直接在 <audio> 元素上指定。將檔案的 MIME 類型包含在 type 屬性中始終是有用的，因為瀏覽器能夠立即辨識是否可以播放該檔案，並且如果不能播放該檔案，就不會浪費時間。

<audio controls>
  <source src="foo.wav" type="audio/wav" />
  <a href="foo.wav" download="foo.wav">Download WAV audio</a>.
</audio>

此範例包含多個 <source> 元素。如果瀏覽器能夠播放第一個源元素（Opus），則會嘗試加載它；如果不能播放，則回退到第二個（Vorbis），最後回退到 MP3：

<audio controls>
  <source src="foo.opus" type="audio/ogg; codecs=opus" />
  <source src="foo.ogg" type="audio/ogg; codecs=vorbis" />
  <source src="foo.mp3" type="audio/mpeg" />
</audio>

具有口語對話的音訊應提供準確描述其內容的字幕和文字記錄。字幕使用 WebVTT 指定，允許聽力受損的人在播放音訊時理解錄音的內容，而文字記錄則允許需要額外時間來審查錄音內容的人以他們舒適的速度和格式審查錄音的內容。

如果使用自動字幕服務，重要的是要審查生成的內容，以確保其準確地代表了源音訊。

<audio> 元素並不直接支援 WebVTT。你將不得不找到一個提供該功能的庫或框架，或者自己編寫代碼來顯示字幕。一個選擇是使用 <video> 元素播放音訊，它支援 WebVTT。

除了口語對話外，字幕和文字記錄還應該識別傳達重要信息的音樂和音效。這包括情感和語調。例如，在下面的 WebVTT 中，請注意使用方括號來為觀眾提供語氣和情感上的洞察；這可以幫助建立通過音樂、非語言聲音和關鍵音效等方式提供的情緒。同時，對於在不支援 <audio> 元素的瀏覽器上觀看的觀眾，提供一些內容（例如直接下載連結）也是一種良好的做法：

1
00:00:00 --> 00:00:45
[Energetic techno music]

2
00:00:46 --> 00:00:51
Welcome to the Time Keeper's podcast! In this episode we're discussing which Swisswatch is a wrist switchwatch?

16
00:00:52 --> 00:01:02
[Laughing] Sorry! I mean, which wristwatch is a Swiss wristwatch?

另外，為了在不支援 <audio> 元素的瀏覽器中提供備用內容（例如直接下載鏈接），這是一個好的做法：

<audio controls>
  <source src="myAudio.mp3" type="audio/mpeg" />
  <source src="myAudio.ogg" type="audio/ogg" />
  <p>
    Download <a href="myAudio.mp3">MP3</a> or
    <a href="myAudio.ogg" download="myAudio.ogg">OGG</a> audio.
  </p>
</audio>

• Web Video Text Tracks Format (WebVTT)
• WebAIM：字幕、文字記錄和音訊描述
• MDN 理解 WCAG，指南 1.2 說明
• 理解成功標準 1.2.1 | W3C 理解 WCAG 2.0
• 理解成功標準 1.2.2 | W3C 理解 WCAG 2.0

• Web 媒體技術

  • 媒體容器格式（檔案類型）
  • 網頁上使用的音訊編解碼器指南

• Web Audio API

• HTMLAudioElement
• <source>
• <video>

• 學習區域：視訊和音訊內容

• 跨瀏覽器音訊基礎知識