現在有HTML5以後變得非常方便!!可以直接在網頁插入影音檔了!!
上述的<audio controls>標籤作用為叫出音訊控制面板，像是撥放、暫停與音量。 <source src="...">元素可以指定撥放的音訊檔 URL，後方的「type="audio/ogg"」為宣告媒體種類(media type)的指令，在此例中宣告檔案類型是 ogg 檔。 以下為檔案類型與媒體種類 (media type) 的對照：
HTML5 支援的音訊檔案有三種：MP3、WAV 與 OGG。
<audio> 與 </audio> 標籤中夾帶的「Your browser does not support the audio element.」，中譯為：「你的瀏覽器不支援 audio 元素」，平時不會出現，只會在使用者使用的瀏覽器不支援 <audio> 元素時出現。較多人用的 Chrome 與 Firefox 瀏覽器支援所有被 HTML5 所支援的音訊檔「.mp3」、「.wav」與「.ogg」。但是微軟的 IE 就不支援副檔名為「.wav」與「.ogg」的音訊檔。此種狀況不常見。
推薦閱讀:
HTML5教學之更細節的語意編碼教學
HTML5新稱audio元素-終於可以撥放音樂了!
在 HTML5 版本出現之前，在 HTML4，要在網頁中聽音樂或看到影片，只能透過像是 Flash 之類的外掛。 而 HTML5 新增的 <audio> 元素提供了可前端工程師直接在網頁中嵌入影音檔的方式。 要在 HTML5 中使用 <audio> 元素嵌入音訊檔的語法與結果範例如下：上述的<audio controls>標籤作用為叫出音訊控制面板，像是撥放、暫停與音量。 <source src="...">元素可以指定撥放的音訊檔 URL，後方的「type="audio/ogg"」為宣告媒體種類(media type)的指令，在此例中宣告檔案類型是 ogg 檔。 以下為檔案類型與媒體種類 (media type) 的對照：
| 檔案類型 | 媒體種類 (media type) |
|---|---|
| MP3 | audio/mpeg |
| OGG | audio/ogg |
| WAV | audio/wav |
<audio> 標籤中的「自動撥放」與「重複撥放」指令
上個段落提到，<audio> 標籤可以讓音訊控制面板 (功能有撥放、暫停與音量控制) 顯現。除此之外，前端工程師還可以為 <audio> 標籤下定義，指定音訊檔是否要自動撥放或是重複撥放。自動撥放
如果在 <audio> 標籤中指定「自動撥放(<audio controls autoplay>)」 ，則嵌入的音訊檔會在網頁 loading 好後自動撥放，不會先問使用者是否要撥放。語法如下： (可點右方的「Result」按鈕看結果，即會自動撥放音檔。音檔歌曲：Dream Theater 「Pull Me Under」 片段)重複撥放
若在 <audio> 標籤中指定「重複撥放(<audio controls loops>)」 ，則嵌入的音訊檔會在撥放完畢後自動重播。語法如下： (「Result」中的音檔撥放結束後，即會自動重播音檔。音檔歌曲：Dream Theater 「Pull Me Under」 片段)| HTML5新增元素目錄：
|
新一格式的HTML5教學
HTML5教學之RDFa的格式設計
NOWnews 今日新聞
達內教育海外合作企業
單一技能已被淘汰 讓Java課程使你充實自我 還能媒合高薪職缺
信不信由你,因為Java課程讓我獲得我想要的生活!
留言