HTML5 audio元素播放聲音jQuery小插件的用法

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

一、前面的些嘮叨
在我浮生如夢的大學那會兒，貌似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庫和本效果腳本文件，如下代碼：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> _fcksavedurl=""http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>" _fcksavedurl=""http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>"
<script type="text/javascript" src="http://www.zhangxinxu.com/study/js/jquery-audioPlay.js"></script>
然后，對需要鼠標經過播放聲音的元素進行綁定就可以了。方法名是：audioPlay()，例如demo頁面中如下的使用：

代碼如下:

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

顯然，要播放聲音，沒有音頻文件源是不行的，所以參數中音頻地址是不可少的，具體參數及相關說明參見下表：

注：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系統用得還挺帶感的。

趁著前端技術大潮尚未到來，需靜心努力修煉基本功，否則，大潮到來，很容易就被來勢洶涌的新技術吞沒的。我個人感覺，現在就像是剛剛地震后的日本，巨大的海嘯即將到來&hellip;&hellip;
測試代碼打包下載

看完上述內容，你們對HTML5 audio元素播放聲音jQuery小插件的用法有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。