HTML 的 audio 標籤

為了增加網頁的互動性，有時候會想讓網頁發出聲音，這時候只要在 HTML 文件中加上 <audio> 標籤即可。

筆記內容為學習過程中的紀錄，內容可能未臻完善，內文可能也會隨著學習過程作增減或修改。
如有錯漏，歡迎留言，謝謝!

特性

• self-closing: 非自閉合標籤，必須有開始標籤和結束標籤。
• display: inline (雖然在 htmlreference.io 說預設是 block ，但我實際測試是跟換行有關，如下所示)

  // 這是換行效果--block
  <span>前面</span>
  <audio controls src="/example/music.mp3"></audio>
  <span>後面</span>

  前面
  
  後面

  // 這是沒換行效果(或是換行但用<div>包住)--inline
  <span>前面</span><audio controls src="/example/music.mp3"></audio><span>後面</span>

  前面後面

功能

• 用來幫網頁加入音訊。可使用 src 屬性或在 <audio> 中加入 <source> 標籤來設定音訊來源。
• <audio></audio> 中除了 <source> 以外的內容在資源載入失敗或不支援時顯示。

屬性

• 直接在 <audio> 中加入屬性。

Name	Value	Description
src	URL	音訊的來源位址
autoplay	(No value required)	是否自動撥放，若不使用預設是 false
loop	(No value required)	是否循環撥放，若不使用預設是 false
controls	(No value required)	是否顯示由瀏覽器提供的音訊控制面板，包含撥放進度、暫停、撥放紐等，若不使用預設是 false
currentTime	數值(number)	以秒為單位的當前撥放位置
muted	(No value required)	預設靜音，若不使用預設是 false

// 範例:
// 使用 controls 會自動產生控制面板(如下所示)
<audio controls muted src="/example/music.mp3"></audio>

• 使用 <source> 標籤

Name	Value	Description
src	URL	音訊的來源位址
type		音訊的 MIME type

<source> 是自閉合標籤，不須使用 </source> 。
可利用 <source> 標籤加入多個音訊來源，瀏覽器會使用第一個有支援的格式來載入。

<audio controls>
  這段文字在資源載入失敗或不支援時顯示。
  <source src="example.ogg" type="audio/ogg">
  <source src="example.mp3" type="audio/mpeg">
</audio>

文章內容如有錯誤，歡迎留言討論！