HTML`audio`標籤

探索使用HTML的基礎知識`audio`標籤

這audio標籤可讓您將音頻內容嵌入HTML頁面。

此元素可以流音頻，也許可以通過以下方式使用麥克風getUserMedia()，或者它可以播放您使用src屬性：

<audio src="file.mp3" />

默認情況下，瀏覽器不顯示此元素的任何控件。這意味著只有在設置為自動播放（稍後會詳細介紹）並且用戶看不到如何停止音頻，控制音量或在軌道上移動時，音頻才會播放。

要顯示內置控件，您可以添加controls屬性：

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

控件可以具有自定義外觀。

您可以使用以下命令指定音頻文件的MIME類型type屬性。如果未設置，瀏覽器將嘗試自動確定它：

<audio src="file.mp3" controls type="audio/mpeg" />

默認情況下，音頻文件不會自動播放。添加autoplay屬性以自動播放音頻：

<audio src="file.mp3" controls autoplay />

注意：移動瀏覽器不允許自動播放

這loop屬性（如果已設置）會在0:00重新開始播放音頻，否則，如果音頻不存在，則音頻會在文件末尾停止：

<audio src="file.mp3" controls autoplay loop />

您也可以使用以下方式播放靜音的音頻文件：muted屬性（不確定是否有什麼用）：

<audio src="file.mp3" controls autoplay loop muted />

CORS

音頻受制於CORS除非您在服務器端允許它，否則音頻文件不能跨源播放。

預加載音頻

如果你不設置autoplay規範說，瀏覽器只會下載音頻元數據（例如，找出長度），而不會下載音頻本身。

您可以使用以下命令強制預加載音頻

<audio src="song.mp3" preload="auto" />

如果顯示內容`audio`不支持

這audio標籤是很好的支持，直到IE9為止，因此現在不需要使用佔位符文本，但是我們有此選項。您只需添加一個結束標記，然後在開始標記和結束標記之間插入文本：

<audio src="song.mp3">Audio tag not supported</audio>

添加本機控件

您可以選擇讓瀏覽器顯示一組控件，以讓用戶在需要時播放音頻，指示長度，設置音量並讓他們瀏覽曲目，而不是在後台自動播放音頻：

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

這是在Chrome中的外觀：

Audio element

您可以使用CSS設置控件的樣式，儘管這不在本介紹的範圍之內。

添加多個來源

瀏覽器可以實現一個音頻編解碼器，但不能實現另一種。也許您想使用一種新的標準，將文件大小減少一半，但是您仍然希望支持較舊的瀏覽器。

您可以通過source標籤：

<audio controls>
 <source src="song.opus" type="audio/ogg; codecs=opus"/>
 <source src="song.ogg" type="audio/ogg; codecs=vorbis"/>
 <source src="song.mp3" type="audio/mpeg"/>
</audio>

處理音頻事件

我們可以聽每個事件audio使用JavaScript的元素，以創建有趣的項目和界面。有很多不同的事件可以玩。

這play音頻播放開始時觸發事件：

document.querySelector('video').addEventListener('play', () => {
  alert('Audio is playing!!!')
})

您也可以使用on<event>屬性直接放在HTML元素上：

<audio src="song.mp3" controls onplay="playing()" />

const playing = () => {
  alert('Audio is playing!!!')
}

這些是您可以聽的一些事件：

play音頻開始播放
pause音頻已暫停
ended音頻播放完成
timeupdate用戶與播放時間軸進行了交互，並且前進/後退
volumechange用戶更改了音量

還有更多與音頻加載相關的事件，並且您可以在MDN上找到完整列表。

免費下載我的HTML手冊