简介
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真的蛮好用的,目前还没有发现出现什么诡异的现象。
网友评论