oops-framework框架之音频管理(六)

引擎： CocosCreator 3.8.0

环境： Mac

Gitee: oops-game-kit

注：作者dgflash的oops-framework框架QQ群： 628575875

简介

在CocosCreator中，音频的播放主要通过组件: AudioSource 来管理音乐、音效的播放、暂停和停止等功能。

该组件的两个主要接口：

play() 用于播放音乐
playOneShot() 用于播放音效

CocosCreator官方提供了对应的音频管理器，大致原理是：

在起始场景中，添加根节点，该节点下包含组件AudioSource
该节点在场景脚本中，声明为常驻根节点
声音管理器为单例模式，在项目初始化中，该管理器会获取该组件，用于实现对音频的管理

import { AudioSource, Component, game } from 'cc';
import {audioManager} from 'manager/audioManager';
const { ccclass, property } = _decorator;@ccclass('GameRoot')
export class GameRoot extends Component {@property(AudioSource) _audioSource: AudioSource = null!;onLoad () {// 获取AudioSource组件，并添加到管理器中const audioSource = this.node.getComponent(AudioSource)!;audioManager.instance.init(audioSource);// 声明常驻根节点，该节点不会在场景切换中被销毁game.addPersistRootNode(this.node);        }
}

更多内容可参考博客： CocosCreator笔记之背景音乐

AudioManger

在oops-framework框架中，音频管理通过AudioManager来实现的。

该类通过管理框架封装的AudioMusic 和 AudioEffect 来实现音乐和音效的播放、暂停和停止等。

他们的继承结构：

该管理类提供的主要接口有：

参数或接口	说明
progressMusic	设置/获取音乐的播放进度
volumeMusic	设置/获取音乐的音量，范围在[0, 1]之间
switchMusic	设置/获取音乐开关
volumeEffect	设置/获取音效音量大小，范围在[0, 1]之间
switchEffect	设置/获取音效开关
load()	音乐音效的初始化加载，并设置音量大小等
save()	本地存储音乐音效的音量、开关等配置数据
playMusic(url, callback?)	播放音乐，可添加音乐播放完成回调
playerMusicLoop(url)	循环播放音乐
setMusicComplete(callback)	设置背景音乐播放完成回调
playEffect(url)	播放音效
resumeAll()	恢复当前暂停的音乐与音效播放
pauseAll()	暂停当前音乐与音效的播放
stopAll()	停止当前音乐与音效的播放

有几个关键的方法需要注意下：

load() 用于音乐音效的初始化

load() {// 获取或添加AudioSource的组件，用于音乐和音效的管理this.music = this.getComponent(AudioMusic) || this.addComponent(AudioMusic)!;this.effect = this.getComponent(AudioEffect) || this.addComponent(AudioEffect)!;// 获取本地存储数据，设置音乐音效的音量大小和开关let data = oops.storage.get(LOCAL_STORE_KEY);if (data) {try {this.local_data = JSON.parse(data);this._volume_music = this.local_data.volume_music;this._volume_effect = this.local_data.volume_effect;this._switch_music = this.local_data.switch_music;this._switch_effect = this.local_data.switch_effect;}catch (e) {this.local_data = {};this._volume_music = 1;this._volume_effect = 1;this._switch_music = true;this._switch_effect = true;}// 根据数据设置声音大小if (this.music) this.music.volume = this._volume_music;if (this.effect) this.effect.volume = this._volume_effect;}
}

playMusic 播放音乐相关

// 播放音乐
playMusic(url: string, callback?: Function) {if (this._switch_music) {this.music.load(url, callback);}
}// AudioMusic.ts 加载音乐并播放
public load(url: string, callback?: Function) {// 根据url进行动态加载oops.res.load(url, AudioClip, (err: Error | null, data: AudioClip) => {if (err) {error(err);}// 检测音乐是否播放中，如果播放则停止if (this.playing) {this._isPlay = false;this.stop();}if (this._url) {oops.res.release(this._url);}// 设置要播放的音频this.enabled = true;this.clip = data;// 注：事件定义在这里，是为了在播放前设置初始播放位置数据callback && callback();// 开始播放this.play();this._url = url;});
}

注：这段代码主要是为了理解框架对音乐音效的封装，先后台加载，完成后才进行播放。

示例

在框架中使用音效管理，在Oops.ts提供的入口主要是：

export class oops {/** 游戏音乐管理 */static audio: AudioManager;
}

在程序中使用的主要示例：

// 初始化
oops.audio.init();
// 设置音乐的播放
oops.audio.volumeMusic = 0.5;
oops.audio.playerMusicLoop("audio/bgm");
// 设置音效的播放
oops.audio.switchEffect = true;
oops.audio.playEffect("audio/click");
// 设置暂停
oops.audio.pauseAll();