html5中audio支持音頻格式的解決方法

HTML5 Audio標簽能夠支持wav, mp3, ogg, acc, webm等格式,但有個很重要的音樂文件格式midi(擴展名mid)卻在各大瀏覽器中都沒有內(nèi)置的支持。不是所有的瀏覽器都支持MP3 OGG之類的,每個瀏覽器因為版權的問題支持的格式都是不一樣的。
瀏覽器和音頻兼容性
瀏覽器制造商并非都同意使用某種音頻文件格式。對于圖像,PNG、JPEG 或 GIF 格式的文件在任何瀏覽器上都能加載到您的網(wǎng)頁里。遺憾的是,音頻文件并非如此。表 1 展示了網(wǎng)頁中可以使用的音頻文件格式,但是并非所有格式都能用于所有瀏覽器。例如,Chrome、Internet Explorer 9 (IE9) 和 Safari 瀏覽器不支持 WAV 文件,這是一種使用非壓縮格式且正在衰敗的標準。
HTML5瀏覽器和音頻格式兼容性
音頻格式 | Chrome | Firefox | IE9 | Opera | Safari |
OGG | 支持 | 支持 | 支持 | 不支持 | 不支持 |
MP3 | 支持 | 不支持 | 支持 | 不支持 | 支持 |
WAV | 不支持 | 支持 | 不支持 | 支持 | 不支持 |
沒有一種通用的文件格式讓每個瀏覽器都使用單個文件格式意味著至少有 2/5 的瀏覽器無法播放某些聲音。這不是無法在單一音頻標準中達成一致的瀏覽器制造商不妥協(xié)的問題,而是涉及專利權和特許權使用費的法律和財務問題。不受軟件專利限制的 OGG 格式旨在一勞永逸地解決這個問題。然而,在撰寫本文時,Opera 和 Safari 都不支持 OGG。與 OGG 格式的文件相比,可用的 WAV 和 MP3 文件數(shù)量要更多,因此毫無疑問,瀏覽器制造商考慮到了這一點。MP3 作為事實的標準是個很好的解決方案。
解決方案:使用三種文件類型和<audio>標簽
鑒于目前的狀況,您可能認為目前還不是在 HTML5 頁面上使用音頻的黃金時刻。在某些方面可能的確如此,但是 HTML5 提供了一個解決方案,使您喜歡的瀏覽器能夠找到一種兼容的格式。
與 <audio> 標簽結(jié)合使用時,<source> 標簽可以嵌套在 <audio> 容器內(nèi)。假設您是一個瓦格納迷,想在 HTML5 網(wǎng)頁上聽他的歌劇 Ride of the Valkyries(《女武神》)。首先,您需要獲得三種文件類型的音樂,即 OGG、MP3 和 WAV。將這些音樂文件與 HTML5 文件放在同一個文件夾內(nèi)。然后,將每個文件名放在單獨的 <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″ /> <source src=”http://demo.mimvp.com/html5/take_you_fly.wav” /> </audio>
無論訪問者使用什么瀏覽器,它都將自動選擇所讀取的第一個文件類型,并為您播放聲音。
總結(jié)
以上所述是小編給大家介紹的html5中audio支持音頻格式的解決方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關文章
- 這篇文章主要介紹了HTML5實現(xiàn)音頻和視頻嵌入的方法的相關資料,原生的支持音頻和視頻,為HTML5注入了巨大的發(fā)展?jié)摿?,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考2018-08-22
- 這篇文章主要介紹了詳解移動端HTML5音頻與視頻問題及解決方案的相關資料,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-08-22
- 這篇文章主要給大家總結(jié)介紹了關于HTML5中視頻音頻的使用的相關資料,文中通過示例代碼介紹的非常詳細,對大家具有一定的參考學習價值,需要的朋友們下面來一起看看吧。2017-07-07
- 本期的教程主要是為了展示Html5新增的2014-12-30
- 這篇文章主要介紹了HTML5自定義mp3播放器源碼,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-06