背景音乐播放插件

全浏览器兼容背景音乐播放插件

兼容IE6-11，firefox，chrome，360等各主流浏览器的背景音乐播放插件，可以绑定页面按钮使用

代码如下：

$.extend({
    /**
     * 背景音乐播放器
     * @param {String} id : 背景音乐控件ID
     * @param {String} src : 背景音乐文件路径
     * @param {Bool} loop : 是否循环，默认true
     * @param {Float} volume : 音量
     * @param {String} pauseBtn : 暂停按钮ID or CLASS
     * @param {Function} pauseCallBack : 暂停按钮回调函数
     */
    audioPlayer:function(o){
        var opts = $.extend({ 
            id:\'\', 
            src:\'\', 
            loop:true, 
            volume:1, 
            pauseBtn:\'\', 
            pauseCallBack:\'\',
            state:1
        },(typeof o ==="object")?o:{});     

        if(opts.src!=""){ 
            if(BROWSER_INFO.name == \'ie\' && ( BROWSER_INFO.ver - 9 ) < 0){    
                // IE8及以下hack   
                var player = $(\'<bgsound></bgsound>\');
                player[0].id = opts.id;
                player[0].src = opts.src;
                player[0].autostart = true;
                player[0].loop = (opts.loop) ? \'infinite\' : 1;
                player[0].volume = -2000 * (1 - opts.volume);
                $(\'body\').append(player.append(src));
                $(opts.pauseBtn).click(function(){
                    if($(\'#\'+opts.id).attr(\'src\') == \'\'){
                        opts.state = 1;
                        $(\'#\'+opts.id).attr(\'src\',opts.src);
                    }else{
                        opts.state = 0;
                        $(\'#\'+opts.id).attr(\'src\',\'\');
                    }
                    if($.isFunction(opts.pauseCallBack)) opts.pauseCallBack(opts.state);
                });
            }else{
                // IE9及以上高级浏览器
                var player = $(\'<audio></audio>\').attr({
                    id : opts.id,
                    autoplay : \'autoplay\',
                    loop : (opts.loop) ? \'loop\' : 1
                });
                player[0].volume = 1 * opts.volume;
                var fileSp = opts.src.split(\'.\'),
                    fileType = fileSp[fileSp.length-1];
                var src = $(\'<source>\').attr({
                    src : opts.src,
                    type :  ( fileType == "ogg" ) ? \'audio/ogg\' : \'audio/mpeg\'
                }); 
                $(\'body\').append(player.append(src));
                $(opts.pauseBtn).click(function(){
                    if(!$(\'#\'+opts.id)[0].paused){
                        opts.state = 0;
                        $(\'#\'+opts.id)[0].pause();
                    }else{
                        opts.state = 1;
                        $(\'#\'+opts.id)[0].play();
                    }
                    if($.isFunction(opts.pauseCallBack)) opts.pauseCallBack(opts.state);
                });
            } 
        }
    }
});

html结构：

<a href="javascript:;" class="audioSwitch"></a>

使用方法：

$(\'.audioSwitch\').click(function(){
    $(this).toggleClass(\'audioPause\'); // 用户切换按钮样式
    if($(\'#audio\').length == 0){ // 防止重复创建背景音乐对象
        $.audioPlayer({
            id:\'audio\',
            src:\'test/xzq.mp3\',
            loop:true, // 默认true
            volume : 0.3,
            pauseBtn : \'.audioSwitch\',
            pauseCallBack : function(state){
                console.log( ( state == 1 ) ? \'播放\' : \'暂停\' );
            }
        });
    }        
});