soundmanager2作为库引入ts项目

简介

soundmanager2.js是一个非常优秀的web端音效播放库

以白鹭项目为例，其他ts项目类似。

js地址：soundmanager2.js

编写.d.ts文件

如果需要更多函数，可以自行添加：

//soundmanager2.d.ts
declare namespace soundManager {
    var flashVersion: number
    var useHighPerformance: boolean

    function setup(config)

    function createSound(sound: {
        id: string,
        url: string
    })

    function play(id: string)

    function stop(id: string)

    function stopAll()

    function pause(id: string)

    function pauseAll()

    function setVolume(id: string, v: number)

    function disable(disable: boolean): boolean

}

引入到项目

参考: egret引入第三方库

编写SoundManager

//SoundMgr

namespace Util {
    export interface SoundPlayListener {
        onLoad();
        onPlay();
        whilePlaying();
        onFinish();
        whileLoading();
        showProgress();
    }

    export class SoundMgr implements SoundPlayListener {
        private static _instance: SoundMgr;
        public static instance(): SoundMgr {
            if (!SoundMgr._instance) {
                SoundMgr._instance = new SoundMgr();
            }
            return SoundMgr._instance;
        }

        public get soundManager() {
            return this.sm2 || soundManager;
        }

        private listener?: SoundPlayListener;
        private isReady: boolean;
        private sounds: Array<{ id: string, path: string }> = [];
        private disabled: boolean;
        private sm2;

        public setSoundPlayListener(listener: SoundPlayListener) {
            this.listener = listener;
        }

        public constructor() {
            this.soundManager.flashVersion = (window.location.toString().match(/#flash8/i) ? 8 : 9);
            this.isReady = false;
            this.disabled = false;

            if (this.soundManager.flashVersion !== 8) {
                this.soundManager.useHighPerformance = true;
            }

            var self = this;

            this.sm2 = this.soundManager.setup({
                // url: url,
                wmode: 'transparent',
                debugMode: false,
                preferFlash: false,
                html5PollingInterval: 50,
                // html5Only: true,
                ignoreMobileRestrictions: true,
                // forceUseGlobalHTML5Audio: true,
                url: "resource/assets/sounds/", //这是你音效的存放目录，需要替换成自己的
                onready: function () {
                    self.soundManager.setup({
                        defaultOptions: {
                            autoLoad: true,
                            multiShot: true,
                            whileloading: self.showProgress,
                            // onid3: self.onid3,
                            onload: self.onLoad,
                            onplay: self.onPlay,
                            whileplaying: self.whilePlaying,
                            onfinish: self.onFinish,

                        }
                    });

                    self.isReady = true;

                    for (var sound of self.sounds) {
                        self.putSound(sound.id, sound.path);
                    }
                    self.sounds = [];
                }
            });
        }

        public onLoad() {
            this.listener && this.listener.onLoad();
        }

        public onPlay() {
            this.listener && this.listener.onPlay();
        }

        public whilePlaying() {
            this.listener && this.listener.whilePlaying();
        }

        public onFinish() {
            this.listener && this.listener.onFinish();
        }

        public whileLoading() {
            this.listener && this.listener.whileLoading();
        }

        public showProgress() {
            this.listener && this.listener.showProgress();
        }

        /**
         * soundManager.createSound({
         *  id: 'mySound',
         *  url: '/path/to/some.mp3',
         *  stream: true,
         *  autoPlay: true,
         *  multiShot: false,
         *  whileloading: function() { alert('sound '+this.id+': '+this.bytesLoaded+' of '+this.bytesTotal+' bytes loaded.'); } // event handler: "this" is scoped to SMSound() object instance for easy access to methods/properties
         * });
         * @param id 
         * @param path 
         *  soundManager.createSound('mySound','/path/to/some.mp3');
         */
        public putSound(id: string, path: string) {
            if (!id) return;
            if (this.isReady) {
                this.soundManager.createSound({
                    id: id,
                    url: path
                });
            } else {
                this.sounds.push({
                    id: id, path: path
                });
            }
        }

        public play(id: string) {
            id && !this.disabled && this.soundManager.play(id);
        }

        public stop(id: string) {
            id && this.soundManager.stop(id);
        }

        public stopAll() {
            this.soundManager.pauseAll();
            this.soundManager.stopAll();
        }

        public pause(id: string) {
            id && this.soundManager.pause(id);
        }

        public pauseAll() {
            this.soundManager.pauseAll();
        }

        // public disable(_disable:boolean|undefined){

        // }

        public setDisabled(_disabled?: boolean) {
            _disabled == undefined ? (this.disabled = !this.disabled) : (this.disabled = _disabled);
            if (this.disabled) {
                this.stopAll();
            }
        }

        public setVolume(id: string, v: number) {
            this.soundManager.setVolume(id, v);
        }

    }
}

使用

loadingView是游戏加载界面，如果没有，可以稍加修改

//Main.ts

export const SoundResMap = {
        s1: "resource/assets/sounds/s1.wav",
        s2: "resource/assets/sounds/s2.mp3",
        ...
}
...
 private async loadsounRes(r: RES.PromiseTaskReporter) {
        var total = Object.keys(SoundResMap).length;
        var i = 0;
        for (var key in game.SoundResMap) {
            Util.SoundMgr.instance().putSound(key, SoundResMap[key]);
            r.onProgress(i, total, undefined);
        }
    }

...

private async loadResource() {
...
await this.loadsounRes(loadingView);
...

}

那么，到底如何使用呢，其实前面的都是准备工作，比如加载资源。

调用：

Util.SoundMgr.instance().play("s1");

====

最后说一句：soundmanager2.js真的蛮好用的，目前还没有发现出现什么诡异的现象。