HTML5 使用audio

■知識點

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

用法如下：

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

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

■實例設計

    <audio>標簽可以包裹多個<s0Urce>標簽，用來導入不同的音頻文件，瀏覽器會自動選擇第一個可以識別的格式進行播放。

<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瀏覽器中的運行結果如圖3.5所示，這個audio元素（含默認控件集）定義了兩個音頻源文件，一個編碼為Ogg，另一個為MP3。完整的過程同指定多個視頻源文件的過程是一樣的。瀏覽器會忽略它不能播放的，僅播放它能播放的。

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

■小結

    <source>標簽可以為〈video〉和<audio>標簽定義多媒體資源，它必須包裹在<video>或<audio>標識符內。<source>標簽包含如下3個可用屬性。

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

    src：定義媒體文件的URL。

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

    可以省略type屬性，讓瀏覽器自動檢側編碼方式。

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

    例如，下面代碼將在頁面中插入背景音樂：在<audio>標簽中設置autoplay和loop屬性。

<audioautoplay loop>

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

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

您的瀏覽器不支持<audio>標簽。

</audio>