今天就跟大家聊聊有關(guān)HTML5 audio元素播放聲音jQuery小插件的用法，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

十余年專注成都網(wǎng)站制作，成都企業(yè)網(wǎng)站建設(shè)，個(gè)人網(wǎng)站制作服務(wù)，為大家分享網(wǎng)站制作知識(shí)、方案，網(wǎng)站設(shè)計(jì)流程、步驟,成功服務(wù)上千家企業(yè)。為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁(yè)設(shè)計(jì)及定制高端網(wǎng)站建設(shè)服務(wù),專注于成都企業(yè)網(wǎng)站建設(shè),高端網(wǎng)頁(yè)制作,對(duì)成都公路鉆孔機(jī)等多個(gè)方面，擁有豐富的網(wǎng)站營(yíng)銷經(jīng)驗(yàn)。

一、前面的些嘮叨
在我浮生如夢(mèng)的大學(xué)那會(huì)兒，貌似flash網(wǎng)站還有點(diǎn)小火，且大凡有點(diǎn)含量的flash站點(diǎn)上，雜七雜八的音效總是少不了。一部分音效是烘托渲染氣氛的背景音樂(lè)，另外一部分就是促進(jìn)互動(dòng)，增強(qiáng)體驗(yàn)的交互聲音，例如按鈕按下或者是經(jīng)過(guò)時(shí)“嗶嗶”聲或是“叭叭”聲。而在那個(gè)時(shí)候，在遠(yuǎn)離flash的web頁(yè)面上鮮有聲音的交互，即使有，要想實(shí)現(xiàn)兼容性，要不借助控件，要不還是通過(guò)與flash交互實(shí)現(xiàn)（例如我之前寫過(guò)的一個(gè)弱智游戲中子彈擊中目標(biāo)的爆炸聲的實(shí)現(xiàn)）。

馬克思告訴我們，事物是發(fā)展的，少女總有一天要變成少婦，技術(shù)也是如此。譬如Mozilla CEO加里·克威克斯今日就透露，F(xiàn)irefox 5將于6月22日正式發(fā)布，距離Firefox 4發(fā)布僅僅3個(gè)月 – 點(diǎn)擊查看。隨著HTML5的推進(jìn)與普及，很多以前要借助flash才能實(shí)現(xiàn)的效果現(xiàn)在可以很輕松地在網(wǎng)頁(yè)上實(shí)現(xiàn)了。例如音頻文件的播放。而本文就折騰點(diǎn)小名堂，讓jQuery下輕松實(shí)現(xiàn)元素hover時(shí)播放聲音的效果，基于HTML5 audio元素，所以，就本文和本插件而言，IE6~8又是個(gè)打醬油，抱團(tuán)取暖的命。

二、效果、資源與使用
就跟相親一樣，對(duì)方長(zhǎng)什么樣子是很重要的，所以，想一窺廬山真面目，您可以狠狠地點(diǎn)擊這里：播放聲音jQuery小插件demo

您可以在demo中看到類似下面的垂直導(dǎo)航：

鼠標(biāo)快速移動(dòng)第一波導(dǎo)航，永遠(yuǎn)就只有一個(gè)聲音在播放，就像心中母親的呼喚；而鼠標(biāo)快速移動(dòng)下面一波導(dǎo)航，多個(gè)聲音鞭炮般噼里啪啦的播放，就像心中眾多偶像們的呼喚。

此jQuery小插件非常簡(jiǎn)單，非常小，30來(lái)行，打蚊子焉用高射炮，所以，我就不打包了。您如果對(duì)腳本有興趣，可以“右鍵 – [目標(biāo)|鏈接]另存為”后面這個(gè)鏈接：jquery-audioPlay.js

使用
首先調(diào)用jQuery庫(kù)和本效果腳本文件，如下代碼：
_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">"

然后，對(duì)需要鼠標(biāo)經(jīng)過(guò)播放聲音的元素進(jìn)行綁定就可以了。方法名是：audioPlay()，例如demo頁(yè)面中如下的使用：

代碼如下:

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

顯然，要播放聲音，沒(méi)有音頻文件源是不行的，所以參數(shù)中音頻地址是不可少的，具體參數(shù)及相關(guān)說(shuō)明參見(jiàn)下表：

注：Firefox和Opera瀏覽器是支持OGG格式的音頻，而webkit核心瀏覽器以及IE是支持MP3格式音頻。

demo頁(yè)面上上下兩組導(dǎo)航的音效應(yīng)用了上面全部的參數(shù)，其完整使用如下：

代碼如下:

$(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
});
});

三、結(jié)尾的些嘮叨
現(xiàn)在支持HTML5 audio元素的瀏覽器為如下：Firefox 3.5+, Chrome 3+, Opera 10.5+, Safari 4+, IE 9+，而在我們這片神奇的國(guó)度上，IE6~8仍然占據(jù)了大半江山，您可能會(huì)覺(jué)得本文的東西目前還是沒(méi)有什么價(jià)值可言的。

然而，本著漸進(jìn)增強(qiáng)的原則，權(quán)衡效用和資源的占用，在實(shí)際項(xiàng)目中應(yīng)用本文的這個(gè)小東東也是未嘗不可的。而且，隨著window7的裝機(jī)量的大幅提升，可能就在不經(jīng)意間，IE6的時(shí)代就戛然而止，到時(shí)，你再亡羊補(bǔ)牢，可能猶未晚矣。此感慨源自我現(xiàn)在的房東阿姨，六七十歲了，雖然對(duì)電腦基本上一竅不通（就用來(lái)看股票），但是其電腦卻是華麗麗滴window7，并且看來(lái)其用window7系統(tǒng)用得還挺帶感的。

趁著前端技術(shù)大潮尚未到來(lái)，需靜心努力修煉基本功，否則，大潮到來(lái)，很容易就被來(lái)勢(shì)洶涌的新技術(shù)吞沒(méi)的。我個(gè)人感覺(jué)，現(xiàn)在就像是剛剛地震后的日本，巨大的海嘯即將到來(lái)……
測(cè)試代碼打包下載

看完上述內(nèi)容，你們對(duì)HTML5 audio元素播放聲音jQuery小插件的用法有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。