如何在html5中使用audio支持音頻格式

如何在html5中使用audio支持音頻格式？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

瀏覽器和音頻兼容性

瀏覽器制造商并非都同意使用某種音頻文件格式。對于圖像，PNG、JPEG 或 GIF 格式的文件在任何瀏覽器上都能加載到您的網頁里。遺憾的是，音頻文件并非如此。表 1 展示了網頁中可以使用的音頻文件格式，但是并非所有格式都能用于所有瀏覽器。例如，Chrome、Internet Explorer 9 (IE9) 和 Safari 瀏覽器不支持 WAV 文件，這是一種使用非壓縮格式且正在衰敗的標準。

HTML5瀏覽器和音頻格式兼容性

沒有一種通用的文件格式讓每個瀏覽器都使用單個文件格式意味著至少有 2/5 的瀏覽器無法播放某些聲音。這不是無法在單一音頻標準中達成一致的瀏覽器制造商不妥協的問題，而是涉及專利權和特許權使用費的法律和財務問題。不受軟件專利限制的 OGG 格式旨在一勞永逸地解決這個問題。然而，在撰寫本文時，Opera 和 Safari 都不支持 OGG。與 OGG 格式的文件相比，可用的 WAV 和 MP3 文件數量要更多，因此毫無疑問，瀏覽器制造商考慮到了這一點。MP3 作為事實的標準是個很好的解決方案。

解決方案：使用三種文件類型和<audio>標簽

鑒于目前的狀況，您可能認為目前還不是在 HTML5 頁面上使用音頻的黃金時刻。在某些方面可能的確如此，但是 HTML5 提供了一個解決方案，使您喜歡的瀏覽器能夠找到一種兼容的格式。

與 <audio> 標簽結合使用時，<source> 標簽可以嵌套在 <audio> 容器內。假設您是一個瓦格納迷，想在 HTML5 網頁上聽他的歌劇 Ride of the Valkyries（《女武神》）。首先，您需要獲得三種文件類型的音樂，即 OGG、MP3 和 WAV。將這些音樂文件與 HTML5 文件放在同一個文件夾內。然后，將每個文件名放在單獨的 <source> 標簽里，并且音頻容器中的所有源標簽都由<audio></audio> 構成，如下所示。

<audio controls>
    <source src=”http://demo.mimvp.com/html5/take_you_fly.ogg” />
    <source src=”http://demo.mimvp.com/html5/take_you_fly.mp3&Prime; />
    <source src=”http://demo.mimvp.com/html5/take_you_fly.wav” />
</audio>

看完上述內容，你們掌握如何在html5中使用audio支持音頻格式的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！