播放聲音 <audio>
<audio> 播放聲音元素可以在 HTML 裡讀取並播放指定格式的聲音，也可以搭配 <source> 元素，載入不同格式聲音，這篇教學會介紹 <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 元素屬性」)，也會使用專門的屬性：
| 屬性 | 說明 |
|---|---|
| src | 聲音網址。 |
| autoplay | 使用後，聲音載入完成就會自動播放。 |
| controls | 使用後，會出現聲音控制器。 |
| loop | 使用後，聲音播放完畢會自動重播。 |
| muted | 使用後，靜音。 |
| preload | 是否預載聲音，可設定 none 不要預載，metadata 載入資訊資料，auto 預先下載。 |
| mediagroup | 聲音分組的群組名稱。 |
影片的 <source> 專門使用的屬性：
| 屬性 | 說明 |
|---|---|
| src | 聲音網址。 |
| type | 聲音格式，可使用 audio/mp3、audio/ogg、audio/wav 或 audio/acc。 |
以下方的 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>
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～