HTML音頻怎么添加？audio標簽有哪些常用屬性？

要在網頁中添加音頻，使用html的

在網頁中添加音頻其實很簡單，主要靠 HTML 的

如何使用

要添加一個音頻文件，只需要用

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

上面這段代碼會在頁面上顯示一個帶控件的音頻播放器，用戶可以直接點擊播放、暫停等。

立即學習“前端免費學習筆記（深入）”；

如果想兼容更多瀏覽器，可以使用多個標簽指定不同格式的音頻文件：

<audio controls>   <source src="music.mp3" type="audio/mpeg">   <source src="music.ogg" type="audio/ogg">   您的瀏覽器不支持音頻播放。 </audio>

這樣瀏覽器會自動選擇它支持的第一個格式進行播放。

常用屬性介紹

1. controls：是否顯示播放控件

這是最常用的屬性之一，加上這個屬性后，瀏覽器會顯示默認的播放器界面（包括播放、暫停、音量等控件）。

如果你不想讓用戶手動控制，只是后臺自動播放，就不加這個屬性。

2. autoplay：是否自動播放

加了這個屬性后，音頻會在頁面加載完成后自動開始播放：

<audio src="music.mp3" autoplay></audio>

不過要注意的是，有些瀏覽器出于用戶體驗考慮，默認會阻止自動播放，尤其是帶有聲音的音頻。為了提高成功率，可以配合 muted 屬性一起使用。

3. loop：是否循環播放

加了這個屬性后，音頻播放結束后會從頭開始重新播放：

<audio src="music.mp3" loop></audio>

適合背景音樂這種場景。

4. muted：是否靜音

有時候我們希望音頻自動播放但不發出聲音，可以用這個屬性：

<audio src="music.mp3" autoplay muted></audio>

這樣即使設置了 autoplay，也能更容易通過瀏覽器的自動播放限制。

5. preload：預加載行為

這個屬性用來告訴瀏覽器是否應該在頁面加載時就開始下載音頻文件。可選值有：

• auto：盡可能預加載音頻
• metadata：只加載元數據（如時長）
• none：不預加載

例如：

<audio src="music.mp3" preload="metadata"></audio>

這對于節省流量或加快頁面加載速度有一定幫助。

注意事項和常見問題

雖然

• 格式兼容性：不同的瀏覽器對音頻格式的支持略有差異，MP3 和 OGG 是比較常見的兩種格式，建議同時提供多個來源以保證兼容性。
• 自動播放限制：很多瀏覽器要求自動播放必須是靜音的，否則會被攔截。這一點在移動端尤其明顯。
• 樣式自定義：默認的播放器外觀無法通過 css 完全修改，如果想要更美觀的界面，可能需要用 JavaScript 自己實現控件。

基本上就這些。掌握這幾個常用屬性，你就能在網頁里靈活地嵌入和控制音頻了。