html5中audio支持音頻格式

HTML5 Audio標籤可以支持wav, mp3, ogg, acc, webm等格式,但有個很重要的音樂文件格式midi(擴展名mid)卻在各大瀏覽器中都沒有內置的支持。不是全部的瀏覽器都支持MP3 OGG之類的,每一個瀏覽器由於版權的問題支持的格式都是不同的。html

瀏覽器和音頻兼容性html5

瀏覽器製造商並不是都贊成使用某種音頻文件格式。對於圖像,PNG、JPEG 或 GIF 格式的文件在任何瀏覽器上都能加載到您的網頁裏。遺憾的是,音頻文件並不是如此。表 1 展現了網頁中可使用的音頻文件格式,可是並不是全部格式都能用於全部瀏覽器。例如,Chrome、Internet Explorer 9 (IE9) 和 Safari 瀏覽器不支持 WAV 文件,這是一種使用非壓縮格式且正在衰敗的標準。web

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

 

音頻格式 Chrome Firefox IE9 Opera Safari
OGG 支持 支持 支持 不支持 不支持
MP3 支持 不支持 支持 不支持 支持
WAV 不支持 支持 不支持 支持 不支持

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

解決方案:使用三種文件類型和<audio>標籤spa

鑑於目前的情況,您可能認爲目前還不是在 HTML5 頁面上使用音頻的黃金時刻。在某些方面可能的確如此,可是 HTML5 提供了一個解決方案,使您喜歡的瀏覽器可以找到一種兼容的格式。htm

與 <audio> 標籤結合使用時,<source> 標籤能夠嵌套在 <audio> 容器內。假設您是一個瓦格納迷,想在 HTML5 網頁上聽他的歌劇 Ride of the Valkyries(《女武神》)。首先,您須要得到三種文件類型的音樂,即 OGG、MP3 和 WAV。將這些音樂文件與 HTML5 文件放在同一個文件夾內。而後,將每一個文件名放在單獨的 <source> 標籤裏,而且音頻容器中的全部源標籤都由<audio></audio> 構成,以下所示。ci

<audio controls>
    <source src=」http://demo.mimvp.com/html5/take_you_fly.ogg」 />
    <source src=」http://demo.mimvp.com/html5/take_you_fly.mp3″ />
    <source src=」http://demo.mimvp.com/html5/take_you_fly.wav」 />
</audio>io

不管訪問者使用什麼瀏覽器,它都將自動選擇所讀取的第一個文件類型,併爲您播放聲音。table

相關文章
相關標籤/搜索