當前位置:才華齋>設計>網頁設計>

HTML5的Audio標籤使用詳解

網頁設計 閱讀(2.63W)

世界上公認的第一個網頁是誕生於1992年,發展至今,網頁已經有21年歷史了。在這21年裡面,網頁開發的標準從沒有完全統一過。而我們經常見到的web音訊就是這麼樣子的。現在,大部分的網頁音訊播放依靠著flash,但是顯然地,flash已經越來越不適用於web開發。所以呢,蘋果放棄了flash,而Android也宣佈不再支援flash。主要原因就是HTML5的誕生,為web開發提供了更加便捷、高效的音訊應用。那麼,在網頁中HTML5音訊或者說HTML5播放器是怎麼應用的呢。希望對大家有所幫助!

HTML5的Audio標籤使用詳解

  HTML5 audio

在HTML5標準網頁裡面,我們可以運用audio標籤來完成我們對聲音的呼叫及播放。以下是最經常見到的運用HTML5三種基本格式

  1.最少的.程式碼

  2.帶有不相容提醒的程式碼

Your browser does not support the audio tag.

  3.儘量相容瀏覽器的寫法

Your browser does not support the audio tag.

  HTML5音訊格式

當前,HTML5 Audio標籤支援三種格式的音訊,分別是wav mp3和ogg格式。而目前主流瀏覽器對他們的支援如下:

IE 9Firefox 3.5Opera 10.5Chrome 3.0Safari 3.0

Ogg Vorbis √√√

MP3√ √√

Wav √√ √

IE8以及IE8以下不支援HTML5的audio標籤

  HTML 5 Audio屬性

autoplay:唯一可選值為autoplay,出現autoplay屬性並準確賦值時,音訊將會自動播放

controls:唯一可選值為controls,出現controls屬性並準確賦值時,音訊播放控制元件將會顯示,控制元件包括:播放、暫停、定位、音量、全屏切換、字幕(如果可用)、音軌(如果可用)。

loop:唯一可選值為loop,出現loop屬性並準確賦值時,音訊將會迴圈播放。

preload:可選值有auto(當頁面載入後載入整個音訊)、meta(當頁面載入後只載入元資料)和none(當頁面載入後不載入音訊) 如果設定了前面的autoplay屬性,那麼preload將會被忽略。

src:指定音訊URL地址,可以是相對的URL也可以是絕對的URL 當然還可以像第2和第3個例子一樣,用source標籤來指定源。