首頁 >web前端 >H5教程 >基於HTML5 audio元素播放聲音jQuery小外掛_html5教學技巧

基於HTML5 audio元素播放聲音jQuery小外掛_html5教學技巧

WBOY
WBOY原創
2016-05-16 15:51:071648瀏覽

一、前面的些嘮叨
在我浮生如夢的大學那會兒,貌似flash網站還有點小火,且大凡有點含量的flash站點上,雜七雜八的音效總是少不了。部分音效是烘托渲染氣氛的背景音樂,另外一部分就是促進互動,增強體驗的互動聲音,例如按鈕按下或是經過時「嗶嗶」聲或是「歪對比」聲。而在那個時候,在遠離flash的web頁面上鮮有聲音的交互,即使有,要想實現兼容性,要不借助控件,要么通過與flash交互實現(例如我之前寫過的一個弱智遊戲中子彈擊中目標的爆炸聲的實現)。

馬克思告訴我們,事物是發展的,少女總有一天要變成​​少婦,科技也是如此。譬如Mozilla CEO加里·克威克斯今日就透露,Firefox 5將於6月22日正式發布,距離Firefox 4發布僅3個月 – 點擊查看。隨著HTML5的推進與普及,許多以前要藉助flash才能實現的效果現在可以很輕鬆地在網頁上實現了。例如音訊檔案的播放。而本文就折騰點小名堂,讓jQuery下輕鬆實現元素hover時播放聲音的效果,基於HTML5 audio元素,所以,就本文和本插件而言,IE6~8又是個打醬油,抱團取暖的命。

二、效果、資源與使用
就跟相親一樣,對方長什麼樣子是很重要的,所以,想一窺廬山真面目,您可以狠狠地點擊這裡:播放聲音jQuery小外掛程式demo

您可以在demo中看到類似下面的垂直導航:

滑鼠快速移動第一波導航,永遠只有一個聲音在播放,就像心中母親的呼喚;而滑鼠快速移動下面一波導航,多個聲音鞭炮般噼裡啪啦的播放,就像心中眾多偶像們的呼喚。

此jQuery小插件非常簡單,非常小,30來行,打蚊子焉用高射砲,所以,我就不打包了。您如果對腳本有興趣,可以「右鍵– [目標|連結]另存為」後面這個連結:jquery-audioPlay.js

使用
先呼叫jQuery庫和本效果腳本文件,如下程式碼:
_fcksavedurl=" "http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">" _fcksavedurl=""http://ajax.googleapis.com/ajax/libs /jquery/1.5.2/jquery.min.js">"

然後,將需要滑鼠經過播放聲音的元素進行綁定就可以了。方法名稱為:audioPlay(),例如demo頁面中如下的使用:

複製程式碼
程式碼如下:
複製程式碼


程式碼如下:


$("#nav li").audioPlay({
name: "playOnce",
urlMp3: "/study/media/beep.mp3",
urlOgg: " /study/media/beep.ogg"
});
参数 默认 释义
name “audioPlay” 字符串,用来分组的。用在页面上同时有多组播放元素时。
urlMp3 “” 字符串,此参数必须。指mp3格式的音频文件地址。
urlOgg “” 字符串,此参数必须。指ogg格式的音频文件地址。
clone false 布尔型。同一组元素是否播放同一个声源。
顯然,要播放聲音,沒有音訊檔案來源是不行的,所以參數中音訊位址是必不可少的,具體參數及相關說明請參考下表:

註:Firefox和Opera瀏覽器是支援OGG格式的音頻,而webkit核心瀏覽器以及IE則是支援MP3格式音訊。

demo頁面上上下兩組導航的音效應用了上面全部的參數,其完整使用如下:

複製程式碼
複製程式碼


程式碼如下:


$(function() {
$("#nav li").audioPlay({
name: "playOnce",
urlMp3: "/study/media/beep.mp3",
urlOgg: "/study/media/beep.ogg"
});
$("#nav2 li").audioPlay({
urlMp3: "/study/media/beep.mp3",
urlOgg: "/study/media/beep.ogg",
clone: true
});
});


三、結尾的些嘮叨
現在支援HTML5 audio元素的瀏覽器為如下:Firefox 3.5 , Chrome 3 , Opera 10.5 , Safari 4 , IE 9 ,而在我們這片神奇的國度上,IE6~8仍然佔據了大半江山,您可能會覺得本文的東西目前還是沒有什麼價值可言的。
然而,本著漸進增強的原則,權衡效用和資源的佔用,在實際項目中應用本文的這個小東東也是未嘗不可的。而且,隨著window7的裝機量的大幅提升,可能就在不經意間,IE6的時代就戛然而止,到時,你再亡羊補牢,可能猶未晚矣。此感動源自我現在的房東阿姨,六、七十歲了,雖然對電腦基本上一竅不通(就用來看股票),但是其電腦卻是華麗麗滴window7,並且看來其用window7系統用得還挺帶感的。 趁著前端技術大潮尚未到來,需靜心努力修煉基本功,否則,大潮到來,很容易就被來勢洶湧的新技術吞沒的。我個人感覺,現在就像剛地震後的日本,巨大的海嘯即將來臨…測試程式碼打包下載
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn