cocosCreator笔记 之 背景音乐

版本： 3.4

简介

cocosCreator目前支持的音频格式:

音频格式	说明
.ogg	开源的有损压缩格式。与同类型的音频相比，优点在于支持多声道编码，采用更加先进的声学模型来减少损失音质，同时文件大小比.mp3格式小。
.mp3	最常见的数字音频编码和有损压缩格式。通过舍弃PCM音频资料中对人类听觉不重要的部分，达到压缩缩小文件的目的。被大量软硬件支持，应用广泛，是目前的主流。
.wav	一种标准数字音频文件，格式未压缩，文件占用较大。它能记录各种单声道或立体声的声音信息，并能保证声音不失真。
.mp4	是一套用于音频、视频信息的压缩编码标准，对于不同的对象采用不同的编码算法。
.m4a	仅有音频的MP4文件， 音频质量是压缩格式中非常高的，相同的比特率下，文件占用更小。

在cocosCreator中使用cc.AudioSource组件控制音乐和音效的播放，编译器中的主要参数有：

• clip 添加用于播放音频的资源, 文件格式为cc.AudioClip
• loop 是否循环播放
• PlayOnAwake 是否在游戏运行(组件激活)时自动播放音频
• Volume 音量大小，范围在[0, 1]之间， 在某些平台上，音量控制可能不起效

更多的API支持参考:AudioSource API

AudioSource

音频的播放有两种方式：

• 通过编译器，添加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);        
    }
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZUOPpUxN-1689330088261)(/Users/wangxuhe/Desktop/music.png)]

管理类的添加：

import { _decorator, AudioSource, assert, clamp01} from 'cc';
const { ccclass, property } = _decorator;

export class audioManager {
    private static _instance: audioManager = null;
    private _audioSource: AudioSource = null;
    private _musicVolme: number = 1;
    private _soundVolume: number = 1;

    static get instance() {
        if (this._instance) {
            return this._instance;
        }
        this._instance = new audioManager();
        return this._instance;
    }

    init(audioSource: AudioSource) {
        this._audioSource = audioSource;
        this._initMusic();
    }

    // 初始化音乐相关
    private _initMusic() {
        // 读取本地存储
        this._musicVolme = 1;
        this._soundVolume = 1;

        //
        this._audioSource.volume = this._musicVolme;
        this._audioSource.loop = true;
        this._audioSource.play();
    }

    // 播放音乐
    playMusic(isLoop: boolean = true) {
        if(!this._audioSource) {
            error("playMusic this._audioSource is nil");
            return;
        }

        this._audioSource.loop = isLoop;
        // 检测是否播放中
        if(!this._audioSource.playing) {
            this._audioSource.play();
        }
    }
		// ...
}

其他

在v3.3.0后添加了事件监听接口：

const EventType = AudioSource.EventType
onEnable() {
  this.audioSource.node.on(EventType.STARTED, this.callFunc, this);
  this.audioSource.node.on(EventTyoe.ENDED, this.callFunc, this);
}

onDisable() {
  this.audioSource.node.off(EventType.STARTED, this.callFunc, this);
  this.audioSource.node.off(EventTyoe.ENDED, this.callFunc, this);
}

在web平台上的音频播放，即使设置了playOnAwake也需要在触摸事件中手动播放

start() {
  let btnNode = find("BUTTON_NODE_NAME");
  // btnNode后的!符号表示非空断言操作符
  // 它用于告诉编译器，某个表达式的值肯定不会是 null 或 undefined，即使声明包含这些值
  btnNode!.on(Node.EventType.TOUCH_START, this.playAudio, this);
}