前言

关键词：音效,背景音乐,游戏开发,Cocos Creator,游戏音乐

在游戏开发中，我们经常需要使用音效来营造游戏氛围，因此本文给大家总结下 Cocos Creator 游戏开发中音效组件的封装和使用。

一、 Cocos Creator 中音频播放基础

1. 基础知识

【1】AudioSource 组件官方文档：http://docs.cocos.com/creator/manual/zh/audio/audio.html

【2】cc.audioEngine官方文档：http://docs.cocos.com/creator/manual/zh/audio/audio.html

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

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

个人建议使用这个来替换 AudioSource 组件播放声音，接口齐全，测试有效，可以自己 封装一个类似 AudioSource 组件的脚本来使用。

方式一：使用 AudioSource 组件播放

创建一个空节点，在这个空节点上，添加一个 其他组件 -> AudioSource

在脚本上预设好 AudioSource，并且根据实际需求，完善脚本的对外接口，如下：

1.  `cc.Class({`

2.  `properties: {`

3.  `audioSource: {`

4.  `type: cc.AudioSource, default: null`

5.  `}, }, play() {`

6.  `this.audioSource.play();`

7.  `}, pause () {`

8.  `this.audioSource.pause();`

9.  `}, });`

方式二：使用 AudioEngine 播放

在脚本内定义一个 audioClip 资源对象，如下示例中 properties 对象内。

直接使用 cc.audioEngine.play(audio, loop, volume); 播放。如下示例中 onLoad 中。

1.  `cc.Class({`

2.  `properties: {`

3.  `audio: {`

4.  `default: null, type: cc.AudioClip`

5.  `}`

6.  `}, onLoad() {`

7.  `this.current = cc.audioEngine.play(this.audio, false, 1);`

8.  `}, onDestroy() {`

9.  `cc.audioEngine.stop(this.current);`

10.  `}`

11.  `});`

AudioEngine 播放的时候，需要注意这里的传入的是一个完整的 AudioClip 对象（而不 是 url）。所以我们不建议在 play 接口内直接填写音频的 url 地址，而是希望大家先定义 一个 AudioClip，然后在编辑器内将音频拖拽过来。

2. 常用方法

【1】组件 AudioSource

1.  `play ( ) 播放音频剪辑。`

2.  `stop ( ) 停止当前音频剪辑。`

3.  `pause ( ) 暂停当前音频剪辑。`

4.  `resume ( ) 恢复播放。`

5.  `rewind ( ) 从头开始播放。`

【2】声音系统 cc.audioEngine

1.  `// 背景音乐，循环`

2.  `cc.audioEngine.playMusic(source);`

3.  `cc.audioEngine.stopMusic(source);`

4.  `// 短音效`

5.  `cc.audioEngine.playEffect(source);`

6.  `cc.audioEngine.stopEffect(source);`

上面的第一种方法原生平台有很多 Bug，所以我们的游戏都用的第二种方法播放声音。

二、 Cocos Creator 音效管理组件封装

1. 创建音效管理类 SoundMgr.ts

1.  `const{ccclass, property} = cc._decorator;`

2.  `@ccclass`

3.  `exportdefaultclassSoundMgr{`

4.  `sound_path:string= 'res/sounds/';`

5.  `// sound 中保存的是音乐的名称和音频对象的 key-value 键值对`

6.  `sounds:{[key:string]:any} = {};`

7.  `enabled:boolean= true;`

8.  `music:string= '';`

9.  `// 单例模式`

10.  `protectedstatic instance:SoundMgr;`

11.  `publicstatic getInstance():SoundMgr{`

12.  `if(!this.instance){`

13.  `this.instance = newSoundMgr();`

14.  `}`

15.  `returnthis.instance;`

16.  `}`

17.  `// 添加声音资源`

18.  `addSound(key:string, clip:cc.AudioClip){`

19.  `this.sounds[key] = clip;`

20.  `}`

21.  `playFx(fxName:string){`

22.  `if(!this.enabled) return;`

23.  `cc.audioEngine.playEffect(this.sounds[fxName], false);`

24.  `}`

25.  `playMusic(musicName:string){`

26.  `this.music = musicName;`

27.  `if(!this.enabled) return;`

28.  `cc.audioEngine.playMusic(this.sounds[musicName], true);`

29.  `}`

30.  `stopMusic(){`

31.  `cc.audioEngine.stopMusic();`

32.  `}`

33.  `setEnabled(enabled:boolean){`

34.  `this.enabled = enabled;`

35.  `if(this.enabled){`

36.  `this.playMusic(this.music);`

37.  `}else{`

38.  `cc.audioEngine.stopAll();`

39.  `}`

40.  `}`

41.  `getEnable(){`

42.  `returnthis.enabled;`

43.  `}`

44.  `}`

由于我们整个游戏中只需要一个音效管理类，故在上述代码中我们将营销管理类设计成 了单例模式。在 sounds 属性中，保存着音效的名称和音效资源对象的 key-value 键值对。播 放时可以通过音效文件的 key 值获取到。

2. 在初始化的时候加载音频资源

通过 Cocos Creator 可视化编辑工具，我们设置游戏场景和资源如下：

因为 sounds 我们是通过代码动态加载，故我们将保存所有声音文件的 sounds 文件夹放 到 resources 文件夹内（如上图）。

然后，新建 GameMgr.ts，挂载到 Canvas 节点上。

1.  `const{ccclass, property} = cc._decorator;`

2.  `importSoundMgrfrom"SoundMgr";`

3.  `@ccclass`

4.  `exportdefaultclassGameMgrextends cc.Component{`

5.  `loadSounds(){`

6.  `// 注意通过代码动态加载的资源必须放到 resources 文件夹下`

7.  `cc.loader.loadResDir('sounds', cc.AudioClip, function(err, clips){`

8.  `console.log("load clips:",clips);`

9.  `if(err){`

10.  `console.log("err:",err);`

11.  `}`

12.  `for(let i=0; i<clips.length; i++){`

13.  `SoundMgr.getInstance().addSound(clips[i].name, clips[i]);`

14.  `}`

15.  `});`

16.  `}`

17.  `onLoad () {`

18.  `this.loadSounds();`

19.  `console.log("sounds:",SoundMgr.getInstance().sounds);`

20.  `}`

21.  `onPlayClick(){`

22.  `console.log("play");`

23.  `SoundMgr.getInstance().playMusic('spring_music');`

24.  `}`

25.  `onPauseClick(){`

26.  `console.log("pause");`

27.  `SoundMgr.getInstance().stopMusic();`

28.  `}`

29.  `}`

在 GameMgr 自定义组件的 onLoad 方法中，调用 loadSounds 加载游戏中所需要的所有 声音资源。同时在 GameMgr.ts 中提供播放和暂停接口方法 onPlayClick 和 onPauseClick 方法。

供播放和暂停按钮调用。

3. 播放和暂停调用

4. 运行测试

声音资源全部加载成功，并且点击播放和暂停按钮，都能测试通过。

三、 注意事项

注意：如果音频播放相关的设置都完成后，在部分浏览器上预览或者运行时仍听不到声 音，那可能是由于浏览器兼容性导致的问题。例如：Chrome 禁用了 WebAudio 的自动播放，而音频默认是使用 Web Audio 的方式加载并播放的，此时用户就需要在 资源管理器中选中音频资源，然后在 属性检查器 中将音频的加载模式修改为 DOM Audio 才能在浏览器上正常播放。

最后

需要项目源码的朋友，可以在评论区或公众号留言联系我们。