回顧之前從我們的留聲機(jī)到現(xiàn)在的各種耳機(jī),我們聽(tīng)歌和獲取音頻的方法也越來(lái)越多,那么今天我們就來(lái)說(shuō)說(shuō)有關(guān)于:“如何解決html5中audio音頻格式問(wèn)題”這個(gè)問(wèn)題。下面是相關(guān)的內(nèi)容,大家可以作為學(xué)習(xí)參考!
HTML5 Audio標(biāo)簽?zāi)軌蛑С謜av, mp3, ogg, acc, webm等格式,但有個(gè)很重要的音樂(lè)文件格式midi(擴(kuò)展名mid)卻在各大瀏覽器中都沒(méi)有內(nèi)置的支持。不是所有的瀏覽器都支持MP3 OGG之類的,每個(gè)瀏覽器因?yàn)榘鏅?quán)的問(wèn)題支持的格式都是不一樣的。
瀏覽器和音頻兼容性
瀏覽器制造商并非都同意使用某種音頻文件格式。對(duì)于圖像,PNG、JPEG 或 GIF 格式的文件在任何瀏覽器上都能加載到您的網(wǎng)頁(yè)里。遺憾的是,音頻文件并非如此。表 1 展示了網(wǎng)頁(yè)中可以使用的音頻文件格式,但是并非所有格式都能用于所有瀏覽器。例如,Chrome、Internet Explorer 9 (IE9) 和 Safari 瀏覽器不支持 WAV 文件,這是一種使用非壓縮格式且正在衰敗的標(biāo)準(zhǔn)。
HTML5瀏覽器和音頻格式兼容性
音頻格式 | Chrome | Firefox | IE9 | Opera | Safari |
OGG | 支持 | 支持 | 支持 | 不支持 | 不支持 |
MP3 | 支持 | 不支持 | 支持 | 不支持 | 支持 |
WAV | 不支持 | 支持 | 不支持 | 支持 | 不支持 |
沒(méi)有一種通用的文件格式讓每個(gè)瀏覽器都使用單個(gè)文件格式意味著至少有 2/5 的瀏覽器無(wú)法播放某些聲音。這不是無(wú)法在單一音頻標(biāo)準(zhǔn)中達(dá)成一致的瀏覽器制造商不妥協(xié)的問(wèn)題,而是涉及專利權(quán)和特許權(quán)使用費(fèi)的法律和財(cái)務(wù)問(wèn)題。不受軟件專利限制的 OGG 格式旨在一勞永逸地解決這個(gè)問(wèn)題。然而,在撰寫(xiě)本文時(shí),Opera 和 Safari 都不支持 OGG。與 OGG 格式的文件相比,可用的 WAV 和 MP3 文件數(shù)量要更多,因此毫無(wú)疑問(wèn),瀏覽器制造商考慮到了這一點(diǎn)。MP3 作為事實(shí)的標(biāo)準(zhǔn)是個(gè)很好的解決方案。
解決方案:使用三種文件類型和<audio>標(biāo)簽
鑒于目前的狀況,您可能認(rèn)為目前還不是在 HTML5 頁(yè)面上使用音頻的黃金時(shí)刻。在某些方面可能的確如此,但是 HTML5 提供了一個(gè)解決方案,使您喜歡的瀏覽器能夠找到一種兼容的格式。
與 ?<audio>
? 標(biāo)簽結(jié)合使用時(shí),?<source>
? 標(biāo)簽可以嵌套在 ?<audio>
?容器內(nèi)。假設(shè)您是一個(gè)瓦格納迷,想在 HTML5 網(wǎng)頁(yè)上聽(tīng)他的歌劇 Ride of the Valkyries(《女武神》)。首先,您需要獲得三種文件類型的音樂(lè),即 OGG、MP3 和 WAV。將這些音樂(lè)文件與 HTML5 文件放在同一個(gè)文件夾內(nèi)。然后,將每個(gè)文件名放在單獨(dú)的 <source> 標(biāo)簽里,并且音頻容器中的所有源標(biāo)簽都由?<audio>
??</audio>
? 構(gòu)成,如下所示。
<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>
無(wú)論訪問(wèn)者使用什么瀏覽器,它都將自動(dòng)選擇所讀取的第一個(gè)文件類型,并為您播放聲音。
總結(jié)
那么對(duì)于:“如何解決html5中audio音頻格式問(wèn)題?”這個(gè)問(wèn)題相信大家也有所眉目了,當(dāng)然如果你還想了解更多有關(guān)于html5這方面的相關(guān)知識(shí)和內(nèi)容我們都可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解。