HTML - 音訊元素

HTML <audio> 元素用於在網頁中支援音訊檔案。

我們可以包含多個音訊源，但是瀏覽器會自動選擇最合適的音訊檔案。大多數 <video> 元素的屬性也與 <audio> 元素相容。HTML 音訊元素最常用的屬性是 controls、autoplay、loop、muted 和 src。

語法

<audio controls>
   <source src= "link/to/audio/file" 
            type = "audio/mp3" />
</audio>

如何在 HTML 中嵌入音訊？

與影片類似，音訊播放器也可以透過設定 src 屬性或在 audio 元素內包含 <source> 標籤來嵌入網頁中。src 屬性和 source 標籤指定音訊的路徑或 URL。當前的 HTML5 草案規範沒有指定瀏覽器應該在 audio 標籤中支援哪些音訊格式。但是最常用的音訊格式是 ogg、mp3 和 wav。因此，也可以透過在 <audio> 元素中使用多個 <source> 標籤來提供所有這些格式。我們讓瀏覽器決定哪種格式更適合音訊播放。

必須使用 controls 屬性，以便使用者可以管理音訊播放功能，例如音量調節、前後導航以及播放或暫停操作。

HTML 音訊元素示例

以下是一些說明如何在 HTML 中使用音訊元素的示例。

在 HTML 頁面中嵌入音訊

以下示例展示如何在網頁中嵌入音訊

<!DOCTYPE html>
<html>
<body>
   <p>Working with audio element</p>
   <audio controls>
      <source src= 
"/html/media/audio/sample_3sec_audio.mp3" 
              type = "audio/mp3" />
      <source src= 
"/html/media/audio/sample_3sec_audio.wav" 
              type = "audio/wav" />
      <source src= 
"/html/media/audio/sample_3sec_audio.ogg" 
               type = "audio/ogg" />
      Your browser does not support the <audio> element.
   </audio>
</body>
</html>

HTML 中音訊的自動播放和迴圈播放

我們還可以使用 autoplay 和 loop 屬性將音訊配置為自動迴圈播放。請記住，除非使用 muted 屬性，否則 Chrome 瀏覽器不支援自動播放功能。因此，建議將 autoplay 和 muted 屬性一起使用。

autoplay 是一個布林屬性，用於在頁面載入後自動播放音訊。如果在 <audio> 元素上存在 loop 屬性，則音訊播放完畢後會自動倒回開頭。

以下示例演示音訊的自動播放和迴圈播放

<!DOCTYPE html>
<html>
<body>
   <p>Working with audio element</p>
   <audio controls autoplay muted loop>
      <source src= 
"/html/media/audio/sample_3sec_audio.mp3" 
               type = "audio/mp3" />
      <source src= 
"/html/media/audio/sample_3sec_audio.wav" 
               type = "audio/wav" />
      <source src= 
"/html/media/audio/sample_3sec_audio.ogg" 
               type = "audio/ogg" />
      Your browser does not support the <audio> 
      element.
   </audio>
</body>
</html>

不同瀏覽器對不同音訊格式的支援

下表列出了不同瀏覽器支援的各種音訊格式

瀏覽器	OGG	WAV	MP3
Chrome	是	是	是
Edge	是	是	是
Safari	否	是	是
Firefox	是	是	是
Opera	是	是	是

列印頁面