如何在網(wǎng)頁(yè)中應(yīng)用HTML 5音頻
HTML5 audio
在HTML5標(biāo)準(zhǔn)網(wǎng)頁(yè)里面,我們可以運(yùn)用audio標(biāo)簽來(lái)完成我們對(duì)聲音的調(diào)用及播放。以下是最經(jīng)常見到的運(yùn)用HTML5三種基本格式:
1.最少的代碼
- <audio src="song.ogg" controls="controls"></audio>
2.帶有不兼容提醒的代碼
- <audio src="song.ogg" controls="controls">
- Your browser does not support the audio tag.
- </audio>
3.盡量兼容瀏覽器的寫法
- <audio controls="controls">
- <source src="song.ogg" type="audio/ogg">
- <source src="song.mp3" type="audio/mpeg">
- Your browser does not support the audio tag.
- </audio>
HTML5音頻格式
當(dāng)前,HTML***udio標(biāo)簽支持三種格式的音頻,分別是wav mp3和ogg格式。而目前主流瀏覽器對(duì)他們的支持如下:
| IE 9 | Firefox 3.5 | Opera 10.5 | Chrome 3.0 | Safari 3.0 | |
|---|---|---|---|---|---|
| Ogg Vorbis | √ | √ | √ | ||
| MP3 | √ | √ | √ | ||
| Wav | √ | √ | √ |
IE8以及IE8以下不支持HTML5的audio標(biāo)簽
HTML ***udio屬性
1.autoplay:***可選值為autoplay,出現(xiàn)autoplay屬性并準(zhǔn)確賦值時(shí),音頻將會(huì)自動(dòng)播放
2.controls:***可選值為controls,出現(xiàn)controls屬性并準(zhǔn)確賦值時(shí),音頻播放控件將會(huì)顯示,控件包括:播放、暫停、定位、音量、全屏切換、字幕(如果可用)、音軌(如果可用)。
3.loop:***可選值為loop,出現(xiàn)loop屬性并準(zhǔn)確賦值時(shí),音頻將會(huì)循環(huán)播放。
4.preload:可選值有auto(當(dāng)頁(yè)面加載后載入整個(gè)音頻)、meta(當(dāng)頁(yè)面加載后只載入元數(shù)據(jù))和none(當(dāng)頁(yè)面加載后不載入音頻) 如果設(shè)置了前面的autoplay屬性,那么preload將會(huì)被忽略。
5.src:指定音頻URL地址,可以是相對(duì)的URL也可以是絕對(duì)的URL 當(dāng)然還可以像第2和第3個(gè)例子一樣,用source標(biāo)簽來(lái)指定源。
原文鏈接:http://www.itluren.com/apply-html5-audio-to-web.html
【編輯推薦】























