HTML - <audio> 標籤

HTML <audio> 標籤用於在網站上嵌入音訊檔案。它允許在 Web 瀏覽器中直接播放音訊檔案，而無需額外的外掛。音訊檔案應使用某些程式碼進行編碼，因為並非所有 Web 瀏覽器都支援所有音訊格式。

語法

<audio>
   <source src=" " type=" ">
</audio>

屬性

HTML 音訊標籤支援 HTML 的全域性和事件屬性。以及一些特定的屬性，如下所示。

屬性	值	描述
autoplay	autoplay	如果指定此布林屬性，則音訊將在其能夠做到這一點後立即開始播放，而不會停止以完成載入資料。
muted	muted	指定音訊應靜音。
controls	controls	如果存在此屬性，則允許使用者控制音訊播放，包括音量、搜尋和暫停/恢復播放。
loop	loop	如果指定此布林屬性，則允許音訊在到達末尾後自動返回開頭。
preload	auto metadata none	此屬性指定音訊將在頁面載入時載入，並準備執行。如果存在 autoplay，則忽略。
src	URL	要嵌入的音訊的 URL。這是可選的；您也可以在影片塊內使用 <source> 元素來指定要嵌入的影片。

HTML 音訊標籤示例

下面的示例將說明音訊標籤的使用。在何處、何時以及如何使用它來呈現音訊播放器，以及我們如何使用 CSS 操作音訊播放器。

嵌入音訊元素

以下是一個示例，我們將使用 <audio> 標籤向網頁新增音樂檔案。

<!DOCTYPE html>
<html>
<body style="background-color:#D5F5E3">
   <audio controls>
      <source src=
"https://samplelib.com/lib/preview/mp3/sample-3s.mp3" 
   type="audio/mpeg">
   </audio>
</body>
</html>

頁面載入後自動播放音訊

考慮另一種情況，我們將向 <audio> 標籤新增 autoplay 屬性。

<!DOCTYPE html>
<html>
<body style="background-color:#E8DAEF">
   <audio controls autoplay>
      <source src=
"https://samplelib.com/lib/preview/mp3/sample-3s.mp3" 
   type="audio/mpeg">
   </audio>
</body>
</html>

帶有自動播放的靜音音訊元素

讓我們看另一個示例，我們將向 <audio> 標籤以及 autoplay 一起使用 muted 屬性。

<!DOCTYPE html>
<html>
<body style="background-color:#CCCCFF">
   <audio controls autoplay muted>
      <source src=
"https://samplelib.com/lib/preview/mp3/sample-3s.mp3" 
   type="audio/mpeg">
   </audio>
</body>
</html>

音訊迴圈播放

在以下示例中，我們將使用 <audio> 標籤以及 loop 屬性。

<!DOCTYPE html>
<html>
<body style="background-color:#FCF3CF ">
   <audio controls autoplay loop>
      <source src=
"https://samplelib.com/lib/preview/mp3/sample-3s.mp3" 
   type="audio/mpeg">
   </audio>
</body>
</html>

支援的瀏覽器

標籤
audio	是 4.0	是 9.0	是 3.5	是 3.1	是 11.5

html_tags_reference.htm

列印頁面