探索使用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中的外觀:
您可以使用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教程:
- HTML簡介
- HTML`iframe`標籤
- HTML表格
- HTML`video`標籤
- HTML`audio`標籤
- 文字的HTML標籤
- HTML表格
- HTML img標籤
- HTML`a`標籤
- HTML`picture`標籤
- HTML`figure`標籤
- HTML容器標籤
- 網絡上的可訪問性
- 如何在HTML中創建註釋
- 如何在暗模式下更改HTML圖像URL
- 使用`srcset`的響應式圖像
- 在黑暗模式下更改圖標