<audio> 播放聲音元素可以在 HTML 裡讀取並播放指定格式的聲音，也可以搭配 <source> 元素，載入不同格式聲音，這篇教學會介紹 <audio> 播放影片元素以及相關用法。

原文參考：播放聲音 audio

認識 <audio>

<audio> 播放聲音元素可以在 HTML 裡讀取並播放聲音，*影片支援的格式有 MP3 ( .mp3 )、WAV ( .wav )、ACC ( .aac、.mp4、.m4a ) 和 Ogg ( .ogg )，使用上通常會搭配 <source> 表示聲音來源。

• <audio> 屬於「容器元素」，需要有「起始標籤」以及「結束標籤」，放在標籤的內容只有在聲音無法載入時才會顯示。
• <audio> 預設不會強制換行。
• <audio> 不可以是 <a> 或 <button> 的子元素。
• <source> 只能是 <video>、<audio> 或 <picture> 的子元素。

例如下方的 HTML 開啟後，會使用 <audio> 在網頁中放入一個聲音播放元素，點擊播放就會播放聲音 ( 不同瀏覽器會有不同樣式的播放控制器 )。

<audio src="test.mp3" controls></audio>

除了有多個格式的聲音檔，也可使用 <source> 的方式「由上而下」載入，只要瀏覽器順利載入，就會忽略後方的聲音，以下方的程式碼為例，網頁中可以放入 MP3 和 WAV 兩種格式的影片，當網頁能正確載入 MP3 時，就不會載入 WAV 格式聲音。

<audio controls>
  <source src="test.mp3" type="audio/mp3">
  <source src="test.wav" type="audio/wav">
</audio>

<audio> 支援屬性

<audio> 除了支援「全域屬性」以及「可見元素的事件屬性」( 參考「HTML 元素屬性」)，也會使用專門的屬性：

影片的 <source> 專門使用的屬性：

以下方的 HTML 為例，網頁開啟後，會出現寬度 400px 的影片的區塊，區塊中會出現播放控制器，並呈現 test.jpg 的預覽圖，影片播放完畢後會自動重播。

<video width="400" controls loop poster="test.jpg">
  <source src="test.mp4" type="video/mp4">
  <source src="test.ogg" type="video/ogg">
</video>

更多教學

大家好，我是 OXXO，是個即將邁入中年的斜槓青年，我有個超過一千篇教學的 STEAM 教育學習網，有興趣可以參考下方連結呦～ ^_^

• Python 教學 ( 學習導讀 )
• Scratch 教學
• GA4 ( Google Analytics 4 ) 教學
• 生成式 AI ( AIGC ) 教學
• ChatGPT 教學
• Midjourney 教學
• Leonardo.Ai 教學
• HTML 教學