前言

• 多媒体内容（文本、音频、视频、图片、动画等）是一款应用能否在”同质化“严重的市场中脱颖而出的关键
• 本文将封装一个音频池组件，以期简化音频工作流程，希望能帮上忙

---

1. 音频播放方式

音频播放方式 示意图

Cocos Creator提供两种音频播放方式，AudioEngine 与 AudioSource 都能播放音频，它们的区别在于 AudioSource 是组件，可以添加到场景中，由编辑器设置。而 AudioEngine 是引擎提供的纯 API，只能在脚本中进行调用。

• 共同点
  • 本质都是处理 AudioClip音频资源
  • 需要在Cocos Creator编辑器中挂载组件

---

2. 组件化工作流程

简单回顾一下使用 AudioSource 的工作流程，随后分析优缺点：

1. 在 层级管理器 上创建一个空节点
2. 选中空节点，在 属性检查器 最下方点击 添加组件 -> 其他组件 -> AudioSource 来添加 AudioSource 组件
3. 将 资源管理器 中所需的音频资源拖拽到 AudioSource 组件的 Clip 中，如下所示:
   新增AudioSource组件
4. 通过脚本控制 AudioSource 组件：

   // AudioSourceControl.js
   cc.Class({
       extends: cc.Component,
   
       properties: {
           audioSource: {
               type: cc.AudioSource,
               default: null
           },
       },
   
       play: function () {
            // 播放
           this.audioSource.play();
       },
   
       pause: function () {
            // 暂停
           this.audioSource.pause();
       },
   });
   

5. 选择相对应的节点，添加脚本组件。然后将带有 AudioSource 组件的节点拖拽到脚本组件中的 Audio Source 上，如下所示：
   挂载组件
6. 引用 audioSource 以控制音效

• 优点：
  • 提供面向设计和开发的两种工作流，是一种简单顺畅的分工合作方式

  记得吗？Cocos Creator 是以内容创作为核心的游戏开发工具，在 Cocos2d-x 基础上实现了彻底脚本化、组件化和数据驱动等特点。

• 缺点
  • 重复工作：每个音频都需要重复上述5个步骤
  • 维护困难：若音频挂载在不同的节点中，不利于定位与维护
• 特点：挂载在节点上的 AndioSource 可以跟随节点的生命周期
  • 优点：节点销毁时，挂载的 AndioSource 可以跟随销毁，无需额外调用方法
  • 缺点：节点频繁创建与销毁时，AndioSource 也跟着频繁加载销毁

---

3. 工具化工作流程

清楚组件化工作流程的优缺点后，我们尝试工具化工作流程，工具代码如下：

// AudioTool.ts
export default class AudioTool {

    /**
     * 音频资源路径
     */
    private static readonly PREFIX_RES_AUDIO = "resources/audio/";

    /**
     * 音效资源后缀
     */
    private static readonly SUFFIX_RES_AUDIO = ".mp3";

    //------------------------------------------

    /**
     * 音效池
     */
    private static _audios = {};

    /**
     * 预加载所有音效
     */
    static preloadAllAudio() {
        let audioEnum = AUDIO_ENUM;
        if (audioEnum) {
            // 遍历枚举
            for (let key in audioEnum) {
                let audioType = audioEnum[key];
                // 拼接资源路径
                let resStr = this.concatResStr(audioType);
                // 加载
                this.doLoadAudioInterval(audioType, resStr)
            }
        } else {
            // do nothing
        }
    }

    /**
     * 拼接资源路径
     */
    private static concatResStr(audioType: string) {
        return this.PREFIX_RES_AUDIO + audioType + this.SUFFIX_RES_AUDIO;
    }

    /**
     * 执行加载音频
     */
    private static doLoadAudioInterval(audioType: string, resStr: string) {
        cc.loader.load(cc.url.raw(resStr), (err, audioClip: AudioClip) => {
            if (!err) {
                // 加载资源成功
                
                // 封装为AudioSource
                let audioSource = new AudioSource();
                audioSource.clip = audioClip;
                // 缓存到音频池
                this._audios[audioType] = audioSource;
            }
        })
    }

    /**
     * 音效控制
     */
    static control(audioType: string, isOn: boolean) {
        let audio: AudioSource = this._audios[audioType];
        if (audio) {
            if (isOn) {
                audio.play();
            } else {
                audio.stop();
            }
        } else {
            // do nothing
        }
    }

    /**
    * 判断是否正在播放
    */
    static isPlaying(audioType: string) {
        let audio: AudioSource = this._audios[audioType];
        if (audio) {
            return audio.isPlaying;
        }
        return false;
    }
}

分为两个阶段：

• 预加载preloadAllAudio ：遍历枚举 AUDIO_ENUM，依次加载音频资源 AudioClip，封装为 AudioSource 后放入 _audios ，后者其实就是一个简单的空对象。
• 播放或停止 control：根据枚举字符串，从_audios 中获取 AudioSource，调用 play 或 stop

利用这个工具类，工作流程变为：

1. 预加载：在应用初始化时调用 preloadAllAudio（只需要一次）
2. 将音频放置到资源管理器对应的目录
3. 在枚举 AUDIO_ENUM 中添加音频文件名，如下所示：

   // AUDIO_ENUM.ts
   export enum AUDIO_ENUM{
   
       /**
        * 背景音乐
        */
       BACKGROUND_MUSIC = "background_music",
   
       /**
        * 某个音效
        */
       EFFECT = "effect"
   
   }
   

4. 引用工具类以控制音效

• 缺点：设计与开发工作流未分离
• 优点：
  • 减少重复工作
  • 增强可维护性

---

5. 权衡

马克思主义告诉我们，凡事都有两面性，其内涵在软件科学的解释就是：没有银弹（No Silver Bullet）。对于组件化和工具化，哪种更理想，实际上并没有一个定论。

• 对于高度内容定制化的功能模块，可以使用组件化工作流程，分离内容定制工作
• 对于需求相对固定的功能模块，可以使用工具化工作流程，简化工作

---

推荐阅读

• Android | 文件存储
• Android | 再按一次返回键退出
• 设计模式 | 静态代理与动态代理
• 笔记 | Markdown
• 笔记 | Android Studio极速编译
• 笔记 | 使用Keytool管理密钥和证书

---

参考

• Cocos Creator 中文官网 | 音频播放
• TypedScrpit 中文官网

---

感谢喜欢！你的点赞是对我最大的鼓励！有任何疑问都可以在下方评论区留言哦！