Cocos Creator | 封装音频池工具

前言

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

1. 音频播放方式

音频播放方式 示意图

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

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

2. 组件化工作流程

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

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

   新增AudioSource组件
4. 通过脚本控制 AudioSource 组件：

   // AudioSourceControl.jscc.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.tsexport 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.tsexport enum AUDIO_ENUM{    /**     * 背景音乐     */    BACKGROUND_MUSIC = "background_music",    /**     * 某个音效     */    EFFECT = "effect"}

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

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

5. 权衡

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

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

推荐阅读

• Java | ThreadLocal 线程本地存储
• Android | 文件存储
• Android | InputManagerService 与输入事件采集
• 设计模式 | 静态代理与动态代理
• 笔记 | Android Studio 极速编译
• 笔记 | 使用 Keytool 管理密钥和证书

参考

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

感谢喜欢！你的点赞是对我最大的鼓励！欢迎关注彭旭锐的简书！

原著是一个有趣的人,若有侵权,请通知删除