基于HTML5 audio元素播放声音jQuery小插件

2019-01-28 20:13:04王振洲

显然,要播放声音,没有音频文件源是不行的,所以参数中音频地址是不可少的,具体参数及相关说明参见下表:
参数 默认 释义
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系统用得还挺带感的。

趁着前端技术大潮尚未到来,需静心努力修炼基本功,否则,大潮到来,很容易就被来势汹涌的新技术吞没的。我个人感觉,现在就像是刚刚地震后的日本,巨大的海啸即将到来……
测试代码打包下载