<audio>：嵌入音訊元素

以上示例展示了<audio>元素的簡單用法。類似於<img>元素，我們在src屬性中包含要嵌入的媒體的路徑；我們還可以包含其他屬性來指定資訊，例如是否希望自動播放和迴圈，是否希望顯示瀏覽器預設的音訊控制元件等。

在不支援該元素的瀏覽器中，<audio></audio>標籤內的內容將作為後備內容顯示。

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

autoplay

布林屬性：如果指定，音訊將在瀏覽器能夠播放時自動開始播放，而無需等待整個音訊檔案下載完成。

注意：自動播放音訊（或帶有音訊軌道的影片）的網站可能會給使用者帶來不愉快的體驗，因此應儘量避免。如果必須提供自動播放功能，則應使其成為可選功能（要求使用者專門啟用它）。但是，這在建立媒體元素時很有用，這些元素的源將在以後由使用者控制的情況下設定。有關如何正確使用自動播放的更多資訊，請參閱我們的自動播放指南。

controls

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

controlslist

當指定controlslist屬性時，它有助於瀏覽器在瀏覽器顯示其自身的一組控制元件（即，當指定controls屬性時）時，選擇要為audio元素顯示的控制元件。

允許的值為nodownload、nofullscreen和noremoteplayback。

crossorigin

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

anonymous

傳送不帶憑據的跨域請求。換句話說，它傳送Origin: HTTP 頭，但不傳送cookie、X.509證書或執行HTTP基本身份驗證。如果伺服器未向源站點提供憑據（透過不設定Access-Control-Allow-Origin: HTTP 頭），則資源將被汙染，並且其使用受到限制。

use-credentials

傳送帶憑據的跨域請求。換句話說，它傳送Origin: HTTP 頭，以及cookie、證書或執行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 事件。

包含口語對話的音訊應提供字幕和成績單，以準確描述其內容。字幕（使用 WebVTT 指定）允許聽力障礙人士在播放音訊錄製時理解其內容，而成績單則允許需要額外時間的人以舒適的速度和格式檢視錄製的內容。

如果使用自動字幕服務，則務必審查生成的內容，以確保其準確地表示源音訊。

<audio> 元素不直接支援 WebVTT。您需要找到一個提供此功能的庫或框架，或者自己編寫程式碼來顯示字幕。一種選擇是使用 <video> 元素播放音訊，該元素確實支援 WebVTT。

除了口語對話外，字幕和成績單還應識別傳達重要資訊的音樂和音效。這包括情感和語氣。例如，在下面的 WebVTT 中，請注意使用方括號為觀看者提供語氣和情感見解；這可以幫助建立原本使用音樂、非語言聲音和關鍵音效等提供的氛圍。

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 影片文字軌道格式 (WebVTT)
• WebAIM：字幕、成績單和音訊描述
• MDN 理解 WCAG，指南 1.2 說明
• 理解成功標準 1.2.1 | W3C 理解 WCAG 2.0
• 理解成功標準 1.2.2 | W3C 理解 WCAG 2.0

以下示例顯示了 <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> 元素上指定要嵌入的音訊軌道。在 type 屬性中始終包含檔案的 MIME 型別很有用，因為瀏覽器能夠立即判斷它是否可以播放該檔案，如果不能，則不會浪費時間。

<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>

• Web 媒體技術
  • 媒體容器格式（檔案型別）
  • Web 上使用的音訊編解碼器指南
• Web Audio API
• HTMLAudioElement
• <source>
• <video>
• 學習領域：影片和音訊內容
• 跨瀏覽器音訊基礎知識