在游戏开发过程中，背景音乐和音效的设置总是绕不过的，今天就来带大家实现一个简单的背景音乐和音效的设置逻辑。
1.首先将音乐资源和图片资源都导入到工程中（公众号后台回复「AudioTest」可获得完整工程，图片和音乐资源来自关东升老师《Cocos2d-x实战》，侵删。）：
2.创建 MainScene，添加三个 Button 组件并摆放到合适位置：
3.创建 SettingScene，添加两个 Toggle 组件和一个 Button 组件并摆放到合适位置（背景音乐和音效开关为 Toggle 组件，返回按钮为 Button 组件）：
4.场景创建完后就可以编辑脚本了，MainScene.js 和 SettingScene.js 脚本分别如下：
1 // MainScene.js
2
3 cc.Class({
4 extends: cc.Component,
5
6 properties: {
7 music: {
8 default: null,
9 type: cc.AudioClip
10 },
11
12 sound: {
13 default: null,
14 type: cc.AudioClip
15 }
16 },
17
18 // LIFE-CYCLE CALLBACKS:
19
20 onLoad() {
21 this.initAudioState();
22 this.playMusic();
23
24 // 设置按钮回调函数
25 this.node.getChildByName("bt_startGame").on(cc.Node.EventType.TOUCH_START, this.cb_startGame, this);
26 this.node.getChildByName("bt_setting").on(cc.Node.EventType.TOUCH_START, this.cb_setting, this);
27 this.node.getChildByName("bt_help").on(cc.Node.EventType.TOUCH_START, this.cb_help, this);
28 },
29
30 start() {
31
32 },
33
34 // update (dt) {},
35
36 // 开始游戏 CallBack
37 cb_startGame(button) {
38 this.playSound();
39 console.log("startGame");
40 },
41
42 // 帮助 CallBack
43 cb_help() {
44 this.playSound();
45 console.log("help");
46 },
47
48 // 设置 CallBack
49 cb_setting() {
50 this.playSound();
51 cc.director.loadScene("SettingScene");
52 },
53
54 // 初始化音乐、音效状态
55 initAudioState(){
56 if (!(cc.sys.localStorage.getItem("IS_SOUND"))) {
57 cc.sys.localStorage.setItem("IS_SOUND", false);
58 }
59
60 if (!(cc.sys.localStorage.getItem("IS_MUSIC"))) {
61 cc.sys.localStorage.setItem("IS_MUSIC", false);
62 }
63 },
64
65 // 播放音效
66 playSound() {
67 if (cc.sys.localStorage.getItem("IS_SOUND") == "true") {
68 var sound = cc.audioEngine.playEffect(this.sound, false);
69 }
70 },
71
72 // 播放音乐
73 playMusic() {
74 if (cc.sys.localStorage.getItem("IS_MUSIC") == "true") {
75 var music = cc.audioEngine.playMusic(this.music, false);
76 }
77 },
78 }); 1 // SettingScene.js
2
3 cc.Class({
4 extends: cc.Component,
5
6 properties: {
7 isPlayMusic: true, // 是否播放音乐
8 isPlaySound: true, // 是否播放音效
9
10 music: {
11 default: null,
12 type: cc.AudioClip
13 },
14
15 sound: {
16 default: null,
17 type: cc.AudioClip
18 }
19 },
20
21 // LIFE-CYCLE CALLBACKS:
22
23 onLoad() {
24 var soundNode = this.node.getChildByName("toggle_sound");
25 var musicNode = this.node.getChildByName("toggle_music");
26 var OKNode = this.node.getChildByName("bt_OK");
27
28 // 设置音乐、音效状态
29 this.isPlaySound = cc.sys.localStorage.getItem("IS_SOUND");
30 this.isPlayMusic = cc.sys.localStorage.getItem("IS_MUSIC");
31
32 soundNode.getComponent(cc.Toggle).isChecked = this.stringToBoolean(this.isPlaySound);
33 musicNode.getComponent(cc.Toggle).isChecked = this.stringToBoolean(this.isPlayMusic);
34
35 // 设置按钮回调函数
36 soundNode.on(\'toggle\', this.cb_sound, this);
37 musicNode.on(\'toggle\', this.cb_music, this);
38 OKNode.on(cc.Node.EventType.TOUCH_START, this.cb_ok, this);
39 },
40
41 start() {
42
43 },
44
45 // 音效 callback
46 cb_sound(toggle) {
47 console.log("cb_sound");
48
49 this.playSound();
50
51 if (toggle.isChecked) {
52 cc.sys.localStorage.setItem("IS_SOUND", true);
53
54 } else {
55 cc.sys.localStorage.setItem("IS_SOUND", false);
56 }
57 },
58
59 // 音乐 callback
60 cb_music(toggle) {
61 console.log("cb_music");
62
63 this.playSound();
64
65 if (toggle.isChecked) {
66 cc.sys.localStorage.setItem("IS_MUSIC", true);
67 var music = cc.audioEngine.playMusic(this.music, false);
68
69 } else {
70 cc.sys.localStorage.setItem("IS_MUSIC", false);
71 cc.audioEngine.stopMusic();
72 }
73 },
74
75
76 // 返回 callback
77 cb_ok() {
78 this.playSound();
79
80 cc.director.loadScene("MainScene");
81 },
82
83 // 播放音效
84 playSound() {
85 if (cc.sys.localStorage.getItem("IS_SOUND") == "true") {
86 var sound = cc.audioEngine.playEffect(this.sound, false);
87 }
88 },
89
90 // 播放音乐
91 playMusic() {
92 if (cc.sys.localStorage.getItem("IS_MUSIC") == "true") {
93 var music = cc.audioEngine.playMusic(this.music, false);
94 }
95 },
96
97 // 将字符长转化为 bool 型
98 stringToBoolean(str) {
99 switch (str.toLowerCase()) {
100 case "true": case "yes": case "1": return true;
101 case "false": case "no": case "0": case null: return false;
102 default: return Boolean(str);
103 }
104 }
105
106 // update (dt) {},
107 }); 5.编辑好脚本后，分别将对应脚本挂载到对应场景的 Canvas 节点上，并将对应的音乐资源拖到对应位置：
6.资源挂载好后就可以进行预览了，可以发现通过设置已经可以控制背景音乐和音效的开关了，感兴趣的小伙伴赶快公众号后台回复「AudioTest」获取资源试试吧！
我是「Super于」，立志做一个每天都有正反馈的人！