背景音乐播放插件
兼容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 ) ? '播放' : '暂停' );
}
});
}
});