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手冊


更多HTML教程: