html5<audio>是 HTML 5 的新標(biāo)簽,定義聲音,比如音樂或其他音頻流。
HTML 5 <audio> 標(biāo)簽
HTML5 audio讓音樂東山再起
HTML5 運(yùn)用aduio標(biāo)簽打造音樂播放器
可以在開始標(biāo)簽和結(jié)束標(biāo)簽之間放置文本內(nèi)容,這樣老的瀏覽器就可以顯示出不支持該標(biāo)簽的信息。
<audio autoplay="autoplay" controls="controls"loop="loop" preload="auto" src="http://demo.mimvp.com/html5/take_you_fly.mp3"> 你的瀏覽器不支持audio標(biāo)簽 </audio>
屬性
|
值
|
描述
|
autoplay
|
autoplay
|
如果出現(xiàn)該屬性,則音頻在就緒后馬上播放。
|
controls
|
controls
|
如果出現(xiàn)該屬性,則向用戶顯示控件,比如播放按鈕。
|
loop
|
loop
|
如果出現(xiàn)該屬性,則每當(dāng)音頻結(jié)束時(shí)重新循環(huán)開始播放。
|
preload
|
preload
|
如果出現(xiàn)該屬性,則音頻在頁面加載時(shí)進(jìn)行加載,并預(yù)備播放。
如果使用 “autoplay”,則忽略該屬性。
|
src
|
url
|
要播放的音頻的 URL。也可以使用<source>標(biāo)簽來設(shè)置音頻。
|
HTML5 Audio標(biāo)簽?zāi)軌蛑С謜av, mp3, ogg, acc, webm等格式,但有個(gè)很重要的音樂文件格式midi(擴(kuò)展名mid)卻在各大瀏覽器中都沒有內(nèi)置的支持。不是所有的瀏覽器都支持MP3OGG之類的,每個(gè)瀏覽器支持的格式都是不一樣的。
瀏覽器和音頻兼容性
瀏覽器制造商并非都同意使用某種音頻文件格式。對(duì)于圖像,PNG、JPEG 或 GIF 格式的文件在任何瀏覽器上都能加載到您的網(wǎng)頁里。遺憾的是,音頻文件并非如此。表 1 展示了網(wǎng)頁中可以使用的音頻文件格式,但是并非所有格式都能用于所有瀏覽器。例如,Chrome、Internet Explorer 9 (IE9) 和 Safari 瀏覽器不支持 WAV 文件,這是一種使用非壓縮格式且正在衰敗的標(biāo)準(zhǔn)。
HTML5瀏覽器和音頻格式兼容性
沒有一種通用的文件格式讓每個(gè)瀏覽器都使用單個(gè)文件格式意味著至少有 2/5 的瀏覽器無法播放某些聲音。這不是無法在單一音頻標(biāo)準(zhǔn)中達(dá)成一致的瀏覽器制造商不妥協(xié)的問題,而是涉及專利權(quán)和特許權(quán)使用費(fèi)的法律和財(cái)務(wù)問題。不受軟件專利限制的 OGG 格式旨在一勞永逸地解決這個(gè)問題。然而,在撰寫本文時(shí),Opera 和 Safari 都不支持 OGG。與 OGG 格式的文件相比,可用的 WAV 和 MP3 文件數(shù)量要更多,因此毫無疑問,瀏覽器制造商考慮到了這一點(diǎn)。MP3 作為事實(shí)的標(biāo)準(zhǔn)是個(gè)很好的解決方案。
解決方案:使用三種文件類型和<audio>標(biāo)簽
鑒于目前的狀況,您可能認(rèn)為目前還不是在 HTML5 頁面上使用音頻的黃金時(shí)刻。在某些方面可能的確如此,但是 HTML5 提供了一個(gè)解決方案,使您喜歡的瀏覽器能夠找到一種兼容的格式。
與 <audio> 標(biāo)簽結(jié)合使用時(shí),<source> 標(biāo)簽可以嵌套在 <audio> 容器內(nèi)。假設(shè)您是一個(gè)瓦格納迷,想在 HTML5 網(wǎng)頁上聽他的歌劇Ride of the Valkyries(《女武神》)。首先,您需要獲得三種文件類型的音樂,即 OGG、MP3 和 WAV。將這些音樂文件與 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>
無論訪問者使用什么瀏覽器,它都將自動(dòng)選擇所讀取的第一個(gè)文件類型,并為您播放聲音。
瀏覽器音頻控件:沒有兩個(gè)是完全相同的
一旦您決定要在網(wǎng)站上提供音頻,將面臨一個(gè)有趣的設(shè)計(jì)選擇。每個(gè)瀏覽器都有與眾不同的外觀,看起來像是有意識(shí)地故意使其與眾不同。下面的圖 1 展示了這些瀏覽器控件的外觀。
圖1:不同瀏覽器上的音頻控件
除了 Chrome 瀏覽器外,所有瀏覽器都有開始/暫??丶?、進(jìn)度條、滑塊、播放秒數(shù)、音量/靜音控件,還顯示聲音文件的總秒數(shù)。使用HTML5 標(biāo)準(zhǔn)和瀏覽器支持,開發(fā)人員可以相信用戶將擁有與 HTML5 音頻類似的體驗(yàn),因?yàn)闉g覽器控件是類似的。您還可以使用 Flash 和 Silverlight 等插件創(chuàng)建控件,但是對(duì)于不同的用戶,體驗(yàn)可能會(huì)有所不同。
某些瀏覽器(如 IE9)甚至有自己的聲音控制條,在瀏覽器本身之外運(yùn)行。用戶打開有聲音的任何網(wǎng)站時(shí),他們可以從 Windows 任務(wù)欄控制聲音,并能夠預(yù)覽當(dāng)前正在播放的聲音。
html代碼(隱藏播放控件)
<audio autoplay="autoplay"> <source src="http://demo.mimvp.com/html5/take_you_fly.mp3" type="audio/mpeg"> </audio>
代碼演示(隱藏播放控件)
<audio autoplay="autoplay" controls="controls"> <source src="http://demo.mimvp.com/html5/take_you_fly.mp3" type="audio/mpeg"> </audio>
標(biāo)簽:大同 赤峰 延邊 林芝 泰州 保定 萍鄉(xiāng)
巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《html5音頻_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理》,本文關(guān)鍵詞 ;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。