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 来实现音乐和音效的播放、暂停和停止等。

他们的继承结构：

音频管理类

音频组件

音乐

音效

AudioManager

Component

AudioSource

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();

注：如果设置页面关闭，注意音频的保存，记得调用save()接口即可。

感谢作者dgflash的分享，作者CSDN博客： dgflash CSDN

最后，祝大家学习和生活愉快!