位置:首頁 > 軟件操作教程 > 編程開發(fā) > HTML > 問題詳情

HTML5 使用audio

提問人:劉團(tuán)圓發(fā)布時間:2020-11-23

■知識點(diǎn)

HTML5新增的<audio>標(biāo)簽可以播放聲音文件或音頻流,支持OggVorbis、MP3、WAV等音頻格式。

用法如下:

    <audio src="samplesong.mp3" controls="controls"></audio>

    其中src屬性用于指定要播放的聲音文件,controls屬性用于設(shè)置是否顯示工具條。<audio>標(biāo)簽支持屬性如表所示。

autoplay

autoplay

如果出現(xiàn)該屬性,則音頻在就緒后馬上播放

controls

controls

如果出現(xiàn)該屬性,則向用戶顯示控件。如播放按鈕

loop

loop

如果出現(xiàn)該屆性,則每當(dāng)音頻結(jié)束時重新開始播放

preload

preload

如果出現(xiàn)該屬性,則音頻在頁面加載時進(jìn)行加載,并預(yù)備播放;如果使用 autoplay,則忽略該屬性

src

URL

要播放的音頻的URL

■實例設(shè)計

    <audio>標(biāo)簽可以包裹多個<s0Urce>標(biāo)簽,用來導(dǎo)入不同的音頻文件,瀏覽器會自動選擇第一個可以識別的格式進(jìn)行播放。

<audio controls〉

    <source src="medias/test.ogg" type="audio/ogg">

    <source src="medias/test.mp3" type=naudio/mpeg">

    <p>你的瀏覽器不支持HTML5 audio,你可以<a href="piano.mp3">下載音頻文件</a> (MP3, 1.3 MB)</p>

</audio>

    以上代碼在Chrome瀏覽器中的運(yùn)行結(jié)果如圖3.5所示,這個audio元素(含默認(rèn)控件集)定義了兩個音頻源文件,一個編碼為Ogg,另一個為MP3。完整的過程同指定多個視頻源文件的過程是一樣的。瀏覽器會忽略它不能播放的,僅播放它能播放的。

    支持Ogg的瀏覽器(如Firefox)會加載piano.ogg。Chrome同時理解Ogg和MP3,但是會加載Ogg文件,因為在audio元素的代碼中,Ogg文件位于MP3文件之前。不支持Ogg格式,但支持MP3格式的瀏覽器(IE10)會加載test.mp3,舊瀏覽器(如IE8)會顯示備用目息。

■小結(jié)

    <source>標(biāo)簽可以為〈video〉和<audio>標(biāo)簽定義多媒體資源,它必須包裹在<video>或<audio>標(biāo)識符內(nèi)。<source>標(biāo)簽包含如下3個可用屬性。

    media:定義媒體資源的類型。

    src:定義媒體文件的URL。

    type:定義媒體資源的MIME類型。如果媒體類型與源文件不匹配,瀏覽器可能會拒絕播放。

    可以省略type屬性,讓瀏覽器自動檢側(cè)編碼方式。

    為了兼容不同瀏覽器,一般使用多個<sourCe>標(biāo)簽包裹多種媒體資源。對于數(shù)據(jù)源,瀏覽器會按照聲明順序進(jìn)行選擇,如果支持的不止一種,那么瀏覽器會優(yōu)先播放位置靠前的媒體資源。數(shù)據(jù)源列表的排放順序應(yīng)按照用戶體驗由高到低,或者服務(wù)器消耗由低到高列出。

    例如,下面代碼將在頁面中插入背景音樂:在<audio>標(biāo)簽中設(shè)置autoplay和loop屬性。

<audioautoplay loop>

    <source src="medias/test.ogg" type="audio/ogg">

    <source src="medias/test.mp3" type="audio/mpeg">

您的瀏覽器不支持<audio>標(biāo)簽。

</audio>


繼續(xù)查找其他問題的答案?

相關(guān)視頻回答
回復(fù)(0)
返回頂部