HTML5 使用audio

■知識(shí)點(diǎn)

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

用法如下：

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

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

■實(shí)例設(shè)計(jì)

    <audio>標(biāo)簽可以包裹多個(gè)<s0Urce>標(biāo)簽，用來(lái)導(dǎo)入不同的音頻文件，瀏覽器會(huì)自動(dòng)選擇第一個(gè)可以識(shí)別的格式進(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所示，這個(gè)audio元素（含默認(rèn)控件集）定義了兩個(gè)音頻源文件，一個(gè)編碼為Ogg，另一個(gè)為MP3。完整的過(guò)程同指定多個(gè)視頻源文件的過(guò)程是一樣的。瀏覽器會(huì)忽略它不能播放的，僅播放它能播放的。

    支持Ogg的瀏覽器（如Firefox)會(huì)加載piano.ogg。Chrome同時(shí)理解Ogg和MP3，但是會(huì)加載Ogg文件，因?yàn)樵赼udio元素的代碼中，Ogg文件位于MP3文件之前。不支持Ogg格式，但支持MP3格式的瀏覽器（IE10)會(huì)加載test.mp3,舊瀏覽器(如IE8)會(huì)顯示備用目息。

■小結(jié)

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

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

    src：定義媒體文件的URL。

    type：定義媒體資源的MIME類型。如果媒體類型與源文件不匹配，瀏覽器可能會(huì)拒絕播放。

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

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

    例如，下面代碼將在頁(yè)面中插入背景音樂(lè)：在<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>