HTML - 音訊元素

Hello, 有志於網頁開發的同學們！今天，我們將要深入HTML音訊元素的精彩世界。作為一個教導這門課程多年的老師，我可以告訴你們，為你的網頁添加聲音真的能讓它們變得生動。那麼，我們開始吧！

語法

HTML <audio> 元素用於在文件中嵌入音訊內容。它是HTML的一個相對較新的添加，於HTML5中引入，並改變了我們如何在網站上包含音訊的方式。

這裡是基本的語法：

<audio src="audio_file.mp3" controls>
您的瀏覽器不支援音訊元素。
</audio>

讓我們分解一下：

• <audio>：這是音訊元素的開始標籤。
• src="audio_file.mp3"：這個屬性指定了音訊文件的來源。
• controls：這個屬性添加了音訊控制，如播放、暫停和音量。
• 開始標籤和結束標籤之間的文本將在瀏覽器不支援音訊元素時顯示。

如何在HTML中嵌入音訊？

現在我們知道了基本的語法，讓我們看看如何實際在HTML文件中嵌入音訊。有幾種不同的方法可以做到這點，我會向你們展示每一種。

方法1：使用src屬性

這是最簡單的方法：

<audio src="path/to/audio.mp3" controls></audio>

方法2：使用<source>元素

這種方法允許你指定多個音訊來源：

<audio controls>
<source src="path/to/audio.mp3" type="audio/mpeg">
<source src="path/to/audio.ogg" type="audio/ogg">
您的瀏覽器不支援音訊元素。
</audio>

在這個例子中，瀏覽器會首先嘗試播放MP3文件。如果無法播放，它會轉而使用OGG文件。如果兩者都無法播放，它會顯示文本信息。

方法3：使用JavaScript

對於更先進的控制，你可以使用JavaScript：

<audio id="myAudio">
<source src="path/to/audio.mp3" type="audio/mpeg">
您的瀏覽器不支援音訊元素。
</audio>

<button onclick="playAudio()">播放</button>

<script>
function playAudio() {
var audio = document.getElementById("myAudio");
audio.play();
}
</script>

這種方法給你更多的靈活性來控制音訊的播放時機和方式。

HTML音訊元素的例子

讓我們看一些更多的例子來真正加強我們的理解。

示例1：基本的音訊播放器

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的瀏覽器不支援音訊元素。
</audio>

這會創建一個帶有控制的基本音訊播放器。它首先嘗試播放OGG文件，然後如果OGG不支援，則使用MP3。

示例2：自動播放和循環

<audio controls autoplay loop>
<source src="background_music.mp3" type="audio/mpeg">
您的瀏覽器不支援音訊元素。
</audio>

這段音訊會在頁面加載時自動播放，並且會持續循環。但是要小心使用自動播放，這可能會讓用戶感到煩躁！

示例3：preload屬性

<audio controls preload="auto">
<source src="interview.mp3" type="audio/mpeg">
您的瀏覽器不支援音訊元素。
</audio>

preload 屬性告訴瀏覽器在頁面加載時應該做什麼。"auto"意味著瀏覽器應該加載整個音訊文件。

不同瀏覽器對音訊格式的支援

現在，這是個非常重要的理解：並不是所有的瀏覽器都支援所有的音訊格式。讓我們在表格中分解這一點：

格式	Chrome	Firefox	Safari	Opera	Internet Explorer
MP3	是	是	是	是	是 (9+)
WAV	是	是	是	是	否
OGG	是	是	否	是	否

正如你所看到的，MP3是最廣泛支援的格式。因此，通常包含MP3版本的音訊是一個好主意。

這裡有一個從我多年的教學經驗中來的專業提示：總是提供至少兩種不同格式的音訊文件。這樣，你就能夠涵蓋大多數瀏覽器的支援範圍。

總結來說，HTML音訊元素是為你的網頁添加聲音的強大工具。無論你是創建音樂播放器、添加背景音樂還是在你的內容中包含音訊片段，理解如何使用<audio>元素都是非常重要的。

記住，掌握這個（以及任何編碼概念）的關鍵在於練習。所以，去吧，在你的HTML文件中嘗試嵌入一些音訊。玩轉我們討論過的不同屬性和方法。最重要的是，玩得開心！也許你就是下一個創造出病毒式音訊網站的個人！

Credits: Image by storyset