HTML <audio> 播放音樂串流 / 聲音檔 / 音效檔 / 音訊檔

<audio> 標籤 (tag) 用來播放多媒體的聲音內容，像是播放 MP3 音樂。

語法：

<audio src="example.mp3" autoplay controls></audio>

<audio> 標籤的屬性 (attributes)：

• src: 音訊資源的位址 (URL)
• preload: 給瀏覽器是否該預載資源的提示。有這些值可以使用：
  • none: 不要預載，因為使用者很可能不會播放該音訊，或你想多節省 server 頻寬
  • metadata: 使用者很可能不會播放該音訊，但先下載音訊的元數據資料還是必要的
  • auto: 使用者很可能會播放該音訊，可以先進行下載
• autoplay: 布林 (boolean) 屬性，控制是否自動播放，預設是 false
• loop: 布林 (boolean) 屬性，控制是否重複播放，預設是 false
• muted: 布林 (boolean) 屬性，控制是否靜音，預設是 false
• controls: 布林 (boolean) 屬性，指定是否顯示音訊控制面板，由瀏覽器提供上面會有播放進度、暫停鈕、播放鈕、靜音鈕等，預設是 false

<audio> 的音源位址除了用 src 屬性指定，也可以在 <audio> 標籤裡面用 <source> 標籤來設定，可以用多個 <source> 指定不同格式類型的音訊來源，而瀏覽器自己會挑第一個有支援的格式來載入。

<source> 標籤的屬性：

• src: 音訊位址 (URL)
• type: 音訊的 MIME type

使用範例：

<audio controls>
  <source src="music.ogg" type="audio/ogg">
  <source src="music.mp3" type="audio/mpeg">
</audio>

<source> 是一個空元素不需要 closing tag。

在 <audio> 裡面 <source> 以外的內容會被當做成是 fallback 內容，給瀏覽器在資源載入失敗或不支援 <audio> 標籤時顯示。

<audio controls>
  <source src="music.ogg" type="audio/ogg">
  <source src="music.mp3" type="audio/mpeg">
  你的瀏覽器不支援 audio tag！
</audio>