背景音乐播放插件

兼容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 ) ? '播放' : '暂停' );
            }
        });
    }        
});

 

posted @ 2017-05-10 16:39  BarryChen89  阅读(941)  评论(0编辑  收藏  举报