瞭解使用 HTML audio 標籤的基本知識
audio 標籤允許您在 HTML 頁面中嵌入音訊內容。
此元素可以以流式傳輸音訊，也可以使用 src 屬性引用音訊來源，例如：
<audio src="file.mp3" />
預設情況下，瀏覽器不會為此元素顯示任何控制項。這意味著只有在設置為自動播放（稍後會講到）時，音訊才會播放，且用戶無法看到如何停止它、控制音量或移動到音軌的其他位置。
要顯示內建的控制項，您可以添加 controls 屬性：
<audio src="file.mp3" controls />
控制項可以具有自訂外觀。
您可以使用 type 屬性指定音訊檔案的 MIME 類型。如果未設置，瀏覽器將嘗試自動確定類型：
<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>
添加原生控制項
您可以選擇要求瀏覽器顯示一組控制項，而不是在背景中自動播放音訊，使用者可以在希望時播放音訊，獲得長度的指示，設置音量並導覽音軌：
<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>
操作音訊事件
我們可以使用 JavaScript 監聽每個 audio 元素的事件，以創建有趣的專案和介面。有很多不同的事件可供使用。
play 事件在音訊播放開始時被觸發：
document.querySelector('video').addEventListener('play', () => {
alert('音訊正在播放！！！')
})
您也可以直接在 HTML 元素上使用 on<event> 屬性直接添加此事件（與其他事件一樣）：
<audio src="song.mp3" controls onplay="playing()" />
const playing = () => {
alert('音訊正在播放！！！')
}
以下是一些您可以監聽的事件：
play音訊開始播放pause音訊被暫停ended音訊播放完成timeupdate使用者與回放時間軸進行交互，快進/倒帶volumechange使用者更改了音量
還有很多與音訊加載相關的事件，您可以在 MDN 上找到完整的事件列表。