浏览器声音解决方案

最新推荐文章于 2022-08-12 16:43:07 发布

原创最新推荐文章于 2022-08-12 16:43:07 发布 · 330 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#浏览器 #HTML5 #音乐 #Flash #JavaScript #ViewUI

javascript 专栏收录该内容

127 篇文章

订阅专栏

虽然 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 封装源码