用HTML5为你的网页添加音效

为交互添加恰当的音效，常常能改善用户体验。在我们所熟悉的windows里，清空回收站的碎纸声就是很好的例子。

下面是一个利用HTML5, Jquery，给页面添加音效的小组件（只是添加音效，并不是播放器）。

其实很简单，就是利用HTML5中的audio标签，播放声音。不过为了照顾IE 6-8，还是用上了bgsound。

兼容所有主流浏览器（非主流不在考虑之列了）

闲话少说，上代码：

<a href=http://www.shancun.net/skin/default/image/nopic.gif#http://www.shancun.net/skin/default/image/nopic.gif class=http://www.shancun.net/skin/default/image/nopic.giffui-btnhttp://www.shancun.net/skin/default/image/nopic.gif>播放</a>

<script>


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,]; 
    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=http://www.shancun.net/skin/default/image/nopic.gif'+this.profile.src+'http://www.shancun.net/skin/default/image/nopic.gif /><source src=http://www.shancun.net/skin/default/image/nopic.gif'+this.profile.altSrc+'http://www.shancun.net/skin/default/image/nopic.gif />';    
            }    
        }else{
            if(this.isIE){
                this.soundObj=$('<bgsound volume=http://www.shancun.net/skin/default/image/nopic.gif-10000http://www.shancun.net/skin/default/image/nopic.gif loop=http://www.shancun.net/skin/default/image/nopic.gif1http://www.shancun.net/skin/default/image/nopic.gif src=http://www.shancun.net/skin/default/image/nopic.gif'+this.profile.src+'http://www.shancun.net/skin/default/image/nopic.gif>').appendTo('body'); //-10000是音量的最小值。先把音量关到最小，免得一加载就叮的一声，吓到人。
            }else{
                this.soundObj=$('<audio preload=http://www.shancun.net/skin/default/image/nopic.gifautohttp://www.shancun.net/skin/default/image/nopic.gif autobuffer><source src=http://www.shancun.net/skin/default/image/nopic.gif'+this.profile.src+'http://www.shancun.net/skin/default/image/nopic.gif /><source src=http://www.shancun.net/skin/default/image/nopic.gif'+this.profile.altSrc+'http://www.shancun.net/skin/default/image/nopic.gif /></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>

附表

Format IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0 Ogg Vorbis No Yes Yes Yes No MP3 Yes No No Yes Yes Wav No Yes Yes Yes Yes

Format

IE9

Firefox3.5

Opera10.5

Chrome3.0

Safari3.0

OggVorbis

No

Yes

Yes

Yes

No

MP3

Yes

No

No

Yes

Yes

Wav

No

Yes

Yes

Yes

Yes