概述

??audio 用于在文檔中嵌入音頻元素。

??audio元素是HTML5新增的行內標簽，IE8及以下瀏覽器不支持audio標簽。

??若瀏覽器不支持video元素或者無法播放音頻，則會顯示替代文本（開始和結束標簽之間的內容）。

<audio src="music.mp3">當前瀏覽器不支持audio標簽</audio>

標簽屬性

• autoplay：音頻會盡快自動播放，不會等待整個音頻下載完成
• controls：瀏覽器提供包括聲音、播放進度、播放暫停的控制面板（不同瀏覽器不一致），用戶可以控制音頻播放
• loop：循環播放音頻
• muted：是否靜音，默認值為false，表示有聲音
• preload：預加載，包括auto、metadata和none三個參數值，auto表示加載音頻，metadata表示不加載音頻，但是需要獲取音頻元數據（如音頻長度），none表示不加載音頻。若指定為空字符串，則等效于auto。注意autoplay屬性優先級高于preload，若autoplay被指定，則會忽略此屬性，瀏覽器將加載音頻以供播放
• src：嵌入的音頻URL

設置多個音頻資源

??不同瀏覽器支持的音頻播放格式有所不同，一般為了兼容效果，會放置多種音頻格式，瀏覽器會自上而下選擇符合的音頻格式。

<audio controls><source src="music.ogg" type="audio/ogg" /><source src="music.mp3" type="audio/mpeg" /><source src="music.wav" type="audio/Wav" />當前瀏覽器不支持audio標簽
</audio>

元素屬性

只讀

• duration：雙進度浮點數，音頻的播放時長，以秒為單位。若音頻不可用或者音頻未加載，則返回NaN
• paused：若音頻被暫停或者未開始播放，則返回true
• ended：音頻是否播放完畢，播放完畢則返回true
• error：發生錯誤情況下的MediaError對象
• currentSrc：返回正在播放或加載的音頻的URL地址，對應于瀏覽器在source元素中選擇的文件
• seeking：用戶是否在音頻中移動或者跳躍到新的播放點

<audio preload="auto" src="music.mp3" onseeking="fn()" controls />
<script>var audio = document.querySelector('audio')function fn() {console.log(audio.seeking)}
</script>

可讀寫

• autoplay：設置音頻自動播放，或者查詢音頻是否設置autoplay
• loop：設置或者查詢音頻是否循環播放
• currentTime：返回音頻當前的播放時間點，雙精度浮點數，單位為秒。音頻未播放，可用于設置音頻開始播放的時間點。音頻播放過程中，可用于設置音頻播放時間點
• controls：顯示或隱藏音頻控制面板，或者查詢控制面板是否可見
• volume：返回音量值，介于0-1之間的雙進度浮點數，或者設置音量值
• muted：設置或者查詢是否靜音
• playbackRate：設置或者查詢音頻的播放速度，1表示正常速度，大于1表示快進，0-1之間表示慢進，0表示暫停（控制面板仍然是播放，僅僅是速度為0）

特殊屬性

played

??表示用戶已經播放的音頻范圍，返回 TimeRanges 對象，其中TimeRanges對象包括一個length屬性和start()、end()兩個方法。

• length：獲取音頻范圍的數量，未開始播放為0，開始播放后至少為1
• start(index)：獲取某個音頻范圍的開始位置
• end(index)：獲取某個音頻范圍的結束位置

??若用戶在音頻中移動或者跳躍播放點，則會獲得多個音頻范圍。

??如下為一段音頻，用戶跳躍了播放點兩次，因此played.length為3，其中三段音頻范圍分別為開始播放、第一個跳躍點、第二個跳躍點的播放范圍。

??上述部分代碼如下。

<audio src="music.mp3" controls></audio>
<button id="btn">console.log</button><script>var btn = document.querySelector('#btn')var audio = document.querySelector('audio')btn.addEventListener('click', () => {const length = audio.played.lengthconsole.log(`length: ${length}`)for (var i = 0; i < length; i++) {var start = audio.played.start(i)var end = audio.played.end(i)console.log(`index: ${i}, start: ${start}, end: ${end}, durations: ${end - start}s`)}})
</script>

buffered

??表示瀏覽器已經緩存的音頻范圍，返回TimeRanges對象，若音頻已完全加載則buffered.length為1，buffered.start(0)為0，buffered.end(0)為音頻時長，詳細參考。

seekable

??表示用戶可跳轉或移動的音頻范圍，返回TimeRanges對象，若音頻已完全加載則seekable.length為1，seekable.start(0)為0，seekable.end(0)為音頻時長。音頻未加載或者加載錯誤，則seakable.length為0，對應的start(0)和end(0)也就不存在，詳細參考。

networkState

??獲取音頻的網絡范圍，詳細參考。

• 0：NETWORK_EMPTY，音頻尚未初始化
• 1：NETWORK_IDLE，瀏覽器已選擇好采用什么編碼格式來播放媒體，但尚未建立網絡連接
• 2：NETWORK_LOADING，瀏覽器正在加載
• 3：NETWORK_NO_SOURCE，未找到音頻資源

error

??通常正常加載音頻，則返回null，若加載過程中發生錯誤，瀏覽器將會返回MediaError對象。MediaError對象包括code和message屬性，message為錯誤描述信息，code為如下錯誤碼。

• 1：MEDIA_ERR_ABORTED，音頻加載加載過程中由于用戶操作而被終止
• 2：MEDIA_ERR_NETWORK，確認音頻資源可用，但是加載時出現網路錯誤，音頻加載被終止
• 3：MEDIA_ERR_DECODE，確認音頻資源可用，但是解碼發生錯誤
• 4：MEDIA_ERR_SRC_NOT_SUPPORTED，音頻格式不被支持或者資源不可用

方法

play

??播放音頻，返回Promise，播放成功時為resolved，因為任何原因播放失敗為rejected，詳細參考。

var audio = document.querySelector('audio')audio.play().then(() => { }).catch(() => { })

pause

??暫停音頻，無返回值，詳細參考。

var audio = document.querySelector('audio')audio.pause()

load

??重新加載src指定的資源，詳細參考。

var audio = document.querySelector('audio')audio.src = 'music.mp3'
audio.load()

事件

常用事件

• loadstart：開始載入音頻時觸發
• durationchange：duration屬性更新時觸發
• loadedmetadata：音頻元數據加載完成時觸發
• loadeddata：音頻的第一幀加載完成時觸發，此時整個音頻還未加載完
• progress：音頻正在加載時觸發
• canplay：瀏覽器能夠開始播放音頻時觸發
• canplaythrough：瀏覽器預計在不停下來進行緩沖的情況下，能夠持續播放指定的音頻時會觸發

其他事件

• abort：音頻終止時觸發，非錯誤導致
• emptied：音頻加載后又被清空，如加載后又調用 load 重新加載
• ended：播放結束，若設置loop屬性，音頻播放結束后不會觸發
• error：發生錯誤
• play：播放事件，第一次播放、暫停后播放會觸發
• playing：播放事件，第一次播放、暫停后播放、播放結束后循環播放會觸發
• pause：暫停事件
• ratechange：播放速率改變
• seeking：播放點改變開始
• seeked：播放點改變結束
• stalled：瀏覽器嘗試獲取音頻，但是音頻不可用時觸發
• suspend：音頻加載暫停時觸發
• timeupdate：音頻currentTime改變時觸發
• volumechange：音量改變時觸發，包括靜音
• waiting：開始播放前緩沖下一幀時觸發

🎉 寫在最后

🍻伙伴們，如果你已經看到了這里，覺得這篇文章有幫助到你的話不妨點贊👍或 Star ✨支持一下哦！

手動碼字，如有錯誤，歡迎在評論區指正💬~

你的支持就是我更新的最大動力💪~

GitHub / Gitee、GitHub Pages、掘金、CSDN 同步更新，歡迎關注😉~

總結

以上是生活随笔為你收集整理的HTML5 之 Audio 标签的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。