使用 HTML5 的 <audio> 標簽是網(wǎng)頁中添加背景音樂或音頻的最簡單方式，其基本寫法為：<audio src="your-audio-file.mp3" controls></audio>，其中 controls 屬性用于顯示播放控件。1. 支持的格式包括 MP3、WAV、OGG、AAC 和 FLAC，但各瀏覽器兼容性不同，MP3 在 Chrome、Edge、Safari 和新版 Firefox 中均支持，WAV 全平臺通用，OGG 被 Firefox 和 Chrome 支持，AAC 主要在 Safari 和 iOS 上可用，F(xiàn)LAC 僅部分支持；2. 實際使用時需注意自動播放限制、跨域問題、文件路徑錯誤和服務(wù)器 MIME 類型配置；3. 推薦提供多個格式的源文件以增強兼容性，如同時包含 MP3 和 OGG；4. 可通過 JavaScript 控制播放行為，例如點擊按鈕播放音頻。

網(wǎng)頁里放背景音樂或者播個音頻，最簡單的方式就是用 HTML5 的 <audio></audio> 標簽。它不需要插件，主流瀏覽器也都支持，但很多人用了之后發(fā)現(xiàn)音頻播不了，其實問題大多出在格式上。

基本寫法：怎么加一個 audio

HTML5 的 <audio></audio> 元素使用起來非常直接，基本結(jié)構(gòu)像這樣：

<audio src="your-audio-file.mp3" controls></audio>

加上 controls 屬性后，瀏覽器會自帶播放、暫停、進度條等控件。你也可以通過 JavaScript 控制播放行為，比如自動播放、靜音、循環(huán)這些功能。

支持哪些格式？不是所有格式都能用

雖然 <audio> 很方便，但它支持的格式不是統(tǒng)一的，不同瀏覽器有差異。常見的幾種格式是 MP3、WAV、OGG、AAC、FLAC，但并不是所有瀏覽器都兼容這些。

大致來說：

• MP3：Chrome、Edge、Safari 都支持，F(xiàn)irefox 也支持（較新版本）。
• WAV：全平臺通用，無損音質(zhì)，但文件大。
• OGG / Vorbis：Firefox 和 Chrome 支持，Safari 也支持，但不如 MP3 普遍。
• AAC / M4A：主要在 Safari 和 iOS 上表現(xiàn)好。
• FLAC：部分瀏覽器支持，比如 Chrome 和 Firefox，但不推薦作為唯一格式。

所以為了兼容性，一般建議提供多個格式的源文件，讓瀏覽器自己選能播的：

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

實際使用中要注意的幾個點

有時候即使格式對了，還是播不了，常見原因包括：

• 自動播放限制：大多數(shù)瀏覽器要求用戶先和頁面交互（比如點一下），才能自動播放音頻，尤其是帶聲音的。
• 跨域問題：如果音頻文件來自別的域名，服務(wù)器需要正確設(shè)置 CORS 權(quán)限。
• 文件路徑錯誤：src 地址寫錯是最常見的低級錯誤，檢查一下路徑是否正確。
• 服務(wù)器 MIME 類型配置不對：有些服務(wù)器沒配置正確的 MIME 類型，會導(dǎo)致某些格式加載失敗。

比如想實現(xiàn)點擊按鈕開始播放，可以用 JS 這樣寫：

const audio = document.querySelector('audio');
document.querySelector('#play-btn').addEventListener('click', () => {
  audio.play();
});

格式選哪個最省事？

如果你只想放一個格式，MP3 是目前兼容性最好的選擇，尤其考慮到移動端和桌面端主流瀏覽器的支持情況。但如果目標用戶多用 Firefox 或其他開源瀏覽器，可以考慮同時提供 OGG 版本。

總之，別只依賴一種格式。給 <audio></audio> 多準備幾個 source，就能覆蓋更多設(shè)備和瀏覽器?；旧暇瓦@些。

以上是HTML5音頻元素和支持格式的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！