播放聲音 <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>
意見回饋
如果有任何建議或問題,可傳送「意見表單」給我,謝謝~