3.1 <audio> 標籤的基礎
HTML5 的 <audio> 標籤用於在網頁上插入音頻文件。這個元素支援多種音訊格式，並為用戶提供內建控制項來播放、暫停和調整音量。
簡單的例子
<audio> 標籤搭配 src 屬性使用，這個屬性指定音頻文件的路徑。你也可以加上 controls 屬性來顯示標準的控制項，比如播放、暫停、音量調整按鈕。
<audio src="audiofile.mp3" controls></audio>
多來源的例子
為了保證不同瀏覽器的支援，可以使用 <source> 標籤指定多個音頻來源。這樣讓瀏覽器選擇支援的音訊格式。
<audio controls>
<source src="audiofile.mp3" type="audio/mpeg">
<source src="audiofile.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
<audio> 標籤的屬性
src：指定音頻文件的路徑。controls：顯示播放控制項autoplay：在頁面載入時自動播放音頻loop：音頻播放結束後重複播放muted：載入時靜音preload：指定瀏覽器如何預載音頻。可能的值：none, metadata, auto
3.2 使用屬性的例子
controls 屬性
controls 屬性會添加音頻播放的標準控制項，例如 "Play"、 "Pause" 按鈕和音量控制。這個屬性使音頻元素變得更加互動且方便用戶使用。
例子：
<audio src="audiofile.mp3" controls></audio>
autoplay 屬性
autoplay 屬性使音頻文件在頁面載入後自動開始播放。使用這個屬性時要小心，因為意外的音頻播放可能會讓用戶感到困擾。
例子：
<audio src="audiofile.mp3" autoplay></audio>
loop 屬性
loop 屬性表示音頻文件應循環播放。這對於需要重複播放的背景音樂或音效非常有用。
例子：
<audio src="audiofile.mp3" autoplay loop></audio>
muted 屬性
muted 屬性在載入時將音頻文件靜音。如果你希望音頻默認靜音播放，用戶可以在需要時自行開啟音量，這會很有用。
<audio src="audiofile.mp3" muted></audio>
preload 屬性
preload 屬性告訴瀏覽器在頁面載入時如何預載音頻文件。它可以接受以下三個值之一：
none：瀏覽器不應預載音頻metadata：瀏覽器應該只載入元數據（如時長、大小等）auto：瀏覽器在頁面載入時應完全載入音頻
<audio src="audiofile.mp3" preload="auto"></audio>
3.3 支援的音訊格式
為了確保跨瀏覽器的相容性，建議使用多種音訊格式。最常見的格式包括 MP3、OGG 和 WAV。讓我們來更詳細地了解一下。
MP3 格式
MP3 (MPEG-1 Audio Layer III) 是最受歡迎的音訊格式之一。它被大多數瀏覽器和設備支援。MP3 使用有損壓縮，這可以在保持較高音質的同時減小文件大小。
例子：
<audio src="audiofile.mp3" type="audio/mpeg"></audio>
OGG 格式
OGG (Ogg Vorbis) 是一種開放的有損音訊壓縮格式，為大多數現代瀏覽器所支援。該格式提供良好的音質，常被用作 MP3 的替代方案。
例子：
<audio src="audiofile.ogg" type="audio/ogg"></audio>
WAV 格式
WAV (Waveform Audio File Format) 是一種無壓縮的音訊格式，提供高音質。然而，由於 WAV 文件的大小通常比 MP3 和 OGG 更大，因此較少被在網頁上使用。
例子：
<audio src="audiofile.wav" type="audio/wav"></audio>
3.4 格式相容性
並非所有瀏覽器都支援同樣的音訊格式。為了確保跨瀏覽器的相容性，建議使用多種音訊格式，比如 MP3、OGG 和 WAV。
多格式支援的例子：
<audio controls>
<source src="audiofile.mp3" type="audio/mpeg">
<source src="audiofile.ogg" type="audio/ogg">
<source src="audiofile.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
可及性
為了確保可及性，應提供文本替代方案，以防瀏覽器不支援 <audio> 元素或音頻文件。這可以通過在開閉標籤 <audio> 之間的文本來完成。
確保可及性的例子：
<audio controls>
<source src="audiofile.mp3" type="audio/mpeg">
<source src="audiofile.ogg" type="audio/ogg">
<source src="audiofile.wav" type="audio/wav">
Your browser does not support the audio element.
You can download the audio file <a href="audiofile.mp3">here</a>.
</audio>
理解 <audio> 標籤的功能及其 API 有助於創建更互動且可及的網頁。
GO TO FULL VERSION