浏览器声音解决方案

虽然 html5 提出了 audio 标签，ie 也有 bgsound （相对audio很弱），但是当前流行并且也统一的还是flash的解决方案。

既有代码复杂功能超全，具有html5前瞻的 soundmanager2 ，也有小巧灵活，简单够用的 niftyplayer ，这次介绍一下以上两者并推荐使用 kissy 的封装。

1.soundmanager2

官网推荐在head中引入库，并设置src为本机swf：

 

<script type="text/javascript" src="../../script/soundmanager2.js"></script>

<script type="text/javascript">


//setTimeout(function(){
// enable flash block handling
soundManager.useFlashBlock = true;

// custom demo options, not for your needs


soundManager.debugMode = true;
soundManager.url = '../../swf/';

//},1000);
</script>
</head>

 

但是我们一般将js放在页尾，或按需加载，在点击时才载入库(相当于上例 1秒 延迟)，这时就可能会出现swf不能正常加载的现象，分析其源码可知，载入库的同时会new 出 soundmanager 对象时，它会自己绑定 window 的 load，DOMContentLoaded 事件，而如果页面载入后按需动态加载，则 load 事件不会再触发了 ，导致初始化失败，所以这里我推荐在引入 soundmanger2 库前定义SM2_DEFER，使用推迟初始化：

 

另一个问题是 soundmanager2 会在全局空间中引入两个变量 SoundManager 与 soundmanager，使用 kissy 封装后可达成完美不污染外部脚本。

 

kissy 封装：

 

KISSY.add("swfaudio", function (S, undefined) {
		var SM2_DEFER=true;
//原始 soundmanager2 代码
//.................


// expose public interfaces
//封装到kissy，不要发布在全局空间
    S.SoundManager = SoundManager; // SoundManager constructor
//内部实例没有必要，使用延迟初始化    
//S.soundManager = soundManager; // public instance: API, Flash callbacks etc.

});

 

使用：

 

//等待页面ready
KISSY.ready(function (S) {
    /**
     统一使用延迟初始化，其他方式有问题
     指定本地的swf地址
     */
    var sm = new S.SoundManager("soundmanager2.swf");
    sm.useFlashBlock = true;
    //开始初始化
    sm.beginDelayedInit();
    sm.onready(function () {
        //具体使用方法参见：http://www.schillmania.com/projects/soundmanager2/
        /*播放音乐方式1：
			@param {String} music id
			@param {String} music path
		*/
        //sm.play("test","waka.mp3");
        /*
			播放音乐方式2：
			createSound方法，可以播放前缓存
			@param autoLoad 播放前缓存
		*/
         var s = sm.createSound({
                id: "music_1",
                url: "waka.mp3",
                autoPlay:true,  //注意使用 autoPlay 立即播放 ，
                autoLoad: true //开始下载
            });
});

 

 

演示demo

 

 

2.niftyplayer

niftyplayer 的 swf 接口非常简单，使用 js 封装后总大小 4 k，对于简单应用非常适合。

演示demo

kissy 封装源码