HTML5基礎訓練班第四課-audio音訊嵌入指令教學

你知道HTLM5中的audio元素很方便嗎?網頁撥放音樂都是靠它搞定的!

HTML5新增audio元素-終於可以撥放音樂了!

在 HTML5 版本出現之前,在 HTML4中要在網頁中聽音樂或看影片,一般只能透過像是 Flash 之類的外掛。而現在的 HTML5 新增 <audio> 元素提供了可直接在網頁中嵌入影音檔的方式。

如果要在 HTML5 中,使用 <audio> 元素來嵌入音訊檔,語法與結果如下:

See the Pen audio element pt.1 by Tedutw (@Tedutw) on CodePen.

上述的<audio controls>標籤作用為叫出音訊控制面板,像是撥放、暫停與音量。

<source src="...">元素可以指定撥放的音訊檔 URL,後方的「type="audio/ogg"」為宣告媒體種類(media type)的指令,在此例中宣告檔案類型是 ogg 檔。 以下為檔案類型與媒體種類 (media type) 的對照:

檔案類型 媒體種類 (media type)
MP3 audio/mpeg
OGG audio/ogg
WAV audio/wav

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」的音訊檔。此種狀況不常見。

<audio> 標籤中的「自動撥放」與「重複撥放」指令

上述提到,在HTML5中的<audio> 標籤可以讓音訊控制面板 (功能有撥放、暫停與音量控制) 顯現。除此之外,前端工程師還可以為 <audio> 標籤下定義,指定音訊檔是否要自動撥放或是重複撥放。

自動撥放

前端工程師建議,若在 <audio> 標籤中指定「自動撥放(<audio controls autoplay>)」 ,則嵌入的音訊檔會在網頁 loading 好後自動撥放,不會事先問使用者是否要撥放。語法如下: (可點右方的「Result」按鈕看結果,即會自動撥放音檔。音檔歌曲:Dream Theater 「Pull Me Under」 片段)

See the Pen audio element pt.2-auto by Tedutw (@Tedutw) on CodePen.

 

重複撥放

假設在 <audio> 標籤中指定「重複撥放(<audio controls loops>)」 ,則嵌入的音訊檔會在撥放完畢後自動重播。語法如下: (「Result」中的音檔撥放結束後,即會自動重播音檔。音檔歌曲:Dream Theater 「Pull Me Under」 片段)

See the Pen audio element pt.2-loop by Tedutw (@Tedutw) on CodePen.

 

 

HTML5新增元素目錄:

 

  1. HTML5的7個內容模組Content Models
  2. header,nav與footer元素
  3. article,section與aside元素
  4. audio影片嵌入元素
  5. video影片嵌入元素
  6. progress載入進度顯示條

 

 

 

 

推薦閱讀:
HTML5基礎訓練班第五課-網頁內容三大元素排版教學


HTML5教學眉角多之1-學會字型與文字排列


想要網頁漂亮又吸引人?今日的HTML5教學不要錯過!


中國IT教育領導品牌 達內教育集團第一家海外授權中心


信不信由你,因為Java課程讓我獲得我想要的生活!


網路行銷課程-SEO優化特別篇(上):擴大關鍵字的同時也在擴大你的客群!!


SEO優化的robots meta和robots.txt小知識

    jimchen19901212 發表在 痞客邦 留言(0) 人氣()