用HTML5为你的网页添加音效（兼容Firefox 3.5+, IE 6-9, Safari 3.0+, Chrome 3.0+, Opera 10.5+）
16lz
2021-01-22
之前的一篇被从首页拿掉了，我想不出哪里违规。
询问管理员，也没回应。
那我就猜一个，也许是没有用插入代码的方式写代码。
Update一下。
为交互添加恰当的音效，常常能改善用户体验。在我们所熟悉的windows里，清空回收站的碎纸声就是很好的例子。
下面是一个利用HTML5, Jquery，给页面添加音效的小组件（只是添加音效，并不是播放器）。
其实很简单，就是利用HTML5中的audio标签，播放声音。不过为了照顾IE 6-8，还是用上了bgsound。
兼容所有主流浏览器（非主流不在考虑之列了）
闲话少说，上代码：
< a href = " # " class = " fui-btn " > 播放 < / a>
< script >
/* Play sound component */
/*
* profile: JSON, {src:'chimes.wav',altSrc:'',loop:false}
*
* setSrc: Function, set the source of sound
* play: Function, play sound
*/
if ( ! FUI){
var FUI = {};
}
FUI.soundComponent = function (profile){
this .profile = {
src: '' , // 音频文件地址
altSrc: '' , // 备选音频文件地址 （不同浏览器支持的音频格式不同，可见附表）
loop: false // 是否循环播放，这个参数现在没有用上
};
if (profile) {
$.extend( this .profile,profile);
}
this .soundObj = null ;
this .isIE = !- [ 1 ,]; /* 这个方法是前辈大牛发明的，利用ie跟非ie中JScript处理数组最后一个逗号“,”的差异, 不过对于IE 9，这个办法就无效了，但此处正合我用，因为IE 9支持audio */
this .init();
};
FUI.soundComponent.prototype = {
init: function (){
this ._setSrc();
},
_setSrc: function (){
if ( this .soundObj){
if ( this .isIE){
this .soundObj[ 0 ].src = this .profile.src;
} else {
this .soundObj[ 0 ].innerHTML = ' <source src=" ' + this .profile.src + ' " /><source src=" ' + this .profile.altSrc + ' " /> ' ;
}
} else {
if ( this .isIE){
this .soundObj = $( ' <bgsound volume="-10000" loop="1" src=" ' + this .profile.src + ' "> ' ).appendTo( ' body ' ); // -10000是音量的最小值。先把音量关到最小，免得一加载就叮的一声，吓到人。
} else {
this .soundObj = $( ' <audio preload="auto" autobuffer><source src=" ' + this .profile.src + ' " /><source src=" ' + this .profile.altSrc + ' " /></audio> ' ).appendTo( ' body ' );
}
}
},
setSrc: function (src,altSrc){
this .profile.src = src;
if ( typeof altSrc != ' undefined ' ){
this .profile.altSrc = altSrc;
}
this ._setSrc();
},
play: function (){
if ( this .soundObj){
if ( this .isIE){
this .soundObj[ 0 ].volume = 1 ; // 把音量打开。
this .soundObj[ 0 ].src = this .profile.src;
} else {
this .soundObj[ 0 ].play();
}
}
}
};
var sd = new FUI.soundComponent({src: ' ding.wav ' ,altSrc: ' ding.mp3 ' });
$( ' .fui-btn ' ).bind( ' click ' , function (e){
sd.play();
});
< / script>更多相关文章
- 字体图标的引入和通过媒体查询改变导航样式
- HTML样式和常用选择器
- 字体图标的引用和自定义样式/媒体查询的使用
- 数据库的CURD操作、PDO本质与原理的学习
- CSS之伪类选择器和简单盒子简单案例
- 伪类选择器与盒模型常用属性
- 伪类选择器-结构伪类、根据位置选择匹配
- 7.4——常用标签与应用场景之表格与单元格
- css伪类选择器和盒模型
随机推荐