1、 Cocos Creator 支持音频格式
目前 Cocos Creator 支持以下格式的音频文件:
音频格式 | 说明 |
---|---|
.ogg |
.ogg 是一种开源的有损音频压缩格式,与同类型的音频压缩格式相比,优点在于支持多声道编码,采用更加先进的声学模型来减少损失音质,同时文件大小在相同条件下比 .mp3 格式小。目前 Android 系统所有的内置铃声也都使用 .ogg 文件。 |
.mp3 |
.mp3 是最常见的一种数字音频编码和有损压缩格式。通过舍弃 PCM 音频资料中对人类听觉不重要的部分,达到压缩成较小文件的目的。但对于大多数用户的听觉感受来说,压缩后的音质与压缩前的相比并没有明显的下降。MP3 被大量软硬件支持,应用广泛,是目前的主流。 |
.wav |
.wav 是微软与 IBM 公司专门为 Windows 开发的一种标准数字音频文件,该文件能记录各种单声道或立体声的声音信息,并能保证声音不失真,因为音频格式未经过压缩。但文件占用相对较大。 |
.mp4 |
.mp4 是一套用于音频、视频信息的压缩编码标准,对于不同的对象可采用不同的编码算法,从而进一步提高压缩效率。 |
.m4a |
.m4a 是仅有音频的 MP4 文件。音频质量是压缩格式中非常高的,同时在相同的比特率下,文件占用更小。 |
2、 Cocos Creator 音频资源生成
Cocos Creator 直接将音频文件拖拽到 资源管理器 面板, 会生成相应的音频资源(AudioClip)。
3、AudioSource 组件播放音乐
AudioSource 组件的属性说明:
属性 | 说明 |
---|---|
Clip | 添加的用于播放的音频资源,默认为空,点击后面的箭头按钮即可选择。 |
Loop | 是否循环播放 |
PlayOnAwake | 是否在游戏运行(组件激活)时自动播放音频 |
Volume | 音量大小,范围在 0~1 之间 |
使用AudioSource 组件播放音频步骤:
(1)、在层级管理器中,创建播放音频的节点
(2)、资源管理器中添加脚本
这里测试命名为:AudioSourceControl.ts
(3)、在 层级管理器 中绑定脚本
将资源管理器中的脚本文件AudioSourceControl.ts 拖拽到层级管理器中:
(4)、层级管理器中添加 AudioSource 组件
点击 属性检查器 下方的 添加组件 按钮,选择 Audio -> AudioSource 即可添加 AudioSource 组件到节点上。
添加节点后如下:
将资源管理器中的音频文件拖拽到属性检查器中,audiosource 组件的 clip 资源中:
(5)、AudioSourceControl.ts 中添加AudioSource 属性,并实现播放声音
import { _decorator, Component, AudioSource, assert } from 'cc';
const { ccclass, property} = _decorator;
@ccclass('AudioSourceControl')
export class AudioSourceControl extends Component {
@property(AudioSource)
public audioSource: AudioSource = null!;
onLoad() {
// 获取 AudioSource 组件
const audioSource = this.node.getComponent(AudioSource)!;
// 检查是否含有 AudioSource,如果没有,则输出错误消息
assert(audioSource);
// 将组件赋到全局变量 _audioSource 中
this.audioSource = audioSource;
console.log(" this._audioSource==" + this.audioSource)
}
start() {
this.play()
}
update(deltaTime: number) {
}
play () {
// 播放音乐
this.audioSource.play();
console.log(" this._audioSource play")
}
pause () {
// 暂停音乐
this.audioSource.pause();
}
}
(6)、 播放状态的监听
import { _decorator, Component, AudioSource, assert } from 'cc';
const { ccclass, property} = _decorator;
@ccclass('AudioSourceControl')
export class AudioSourceControl extends Component {
@property(AudioSource)
public audioSource: AudioSource = null!;
onLoad() {
// 获取 AudioSource 组件
const audioSource = this.node.getComponent(AudioSource)!;
// 检查是否含有 AudioSource,如果没有,则输出错误消息
assert(audioSource);
// 将组件赋到全局变量 _audioSource 中
this.audioSource = audioSource;
console.log(" this._audioSource==" + this.audioSource)
}
onEnable () {
// Register the started event callback
this.audioSource.node.on(AudioSource.EventType.STARTED, this.onAudioStarted, this);
// Register the ended event callback
this.audioSource.node.on(AudioSource.EventType.ENDED, this.onAudioEnded, this);
}
onDisable () {
this.audioSource.node.off(AudioSource.EventType.STARTED, this.onAudioStarted, this);
this.audioSource.node.off(AudioSource.EventType.ENDED, this.onAudioEnded, this);
}
onAudioStarted () {
console.log("this._audioSource onAudioStarted")
}
onAudioEnded () {
console.log("this._audioSource onAudioEnded")
}
start() {
this.play()
}
update(deltaTime: number) {
}
play () {
// 播放音乐
this.audioSource.play();
console.log(" this._audioSource play")
}
pause () {
// 暂停音乐
this.audioSource.pause();
}
}
4、AudioSource 组件播放音效
音效播放一般有以下特点:
- 播放时间短
- 同时播放的数量多
AudioSource 组件提供 playOneShot
接口来播放音效。
输入参数:
名称 | 类型 | 描述 |
---|---|---|
volume |
number | 音量 0-1 |
playOneShot
是一次性播放操作,播放后的音效无法暂停或停止播放,也无法监听播放结束的事件回调。
import { AudioClip, AudioSource, Component, _decorator } from 'cc';
const { ccclass, property } = _decorator;
@ccclass("AudioSourceControl")
export class AudioSourceControl extends Component {
@property(AudioClip)
public clip: AudioClip = null!;
@property(AudioSource)
public audioSource: AudioSource = null!;
playOneShot () {
this.audioSource.playOneShot(this.clip, 1);
}
}
playOneShot
是一次性播放操作,播放后的音效无法暂停或停止播放,也无法监听播放结束的事件回调.
5、音频管理器 AudioManager.ts 封装
//AudioManager.ts
import { Node, AudioSource, AudioClip, resources, director } from 'cc';
/**
* @en
* this is a sington class for audio play, can be easily called from anywhere in you project.
* @zh
* 这是一个用于播放音频的单件类,可以很方便地在项目的任何地方调用。
*/
export class AudioManager {
private static _inst: AudioManager;
public static get inst(): AudioManager {
if (this._inst == null) {
this._inst = new AudioManager();
}
return this._inst;
}
private _audioSource: AudioSource;
constructor() {
//@en create a node as AudioManager
//@zh 创建一个节点作为 AudioManager
let audioMgr = new Node();
audioMgr.name = '__audioMgr__';
//@en add to the scene.
//@zh 添加节点到场景
director.getScene().addChild(audioMgr);
//@en make it as a persistent node, so it won't be destroied when scene change.
//@zh 标记为常驻节点,这样场景切换的时候就不会被销毁了
director.addPersistRootNode(audioMgr);
//@en add AudioSource componrnt to play audios.
//@zh 添加 AudioSource 组件,用于播放音频。
this._audioSource = audioMgr.addComponent(AudioSource);
}
public get audioSource() {
return this._audioSource;
}
/**
* @en
* play short audio, such as strikes,explosions
* @zh
* 播放短音频,比如 打击音效,爆炸音效等
* @param sound clip or url for the audio
* @param volume
*/
playOneShot(sound: AudioClip | string, volume: number = 1.0) {
if (sound instanceof AudioClip) {
this._audioSource.playOneShot(sound, volume);
}
else {
resources.load(sound, (err, clip: AudioClip) => {
if (err) {
console.log(err);
}
else {
this._audioSource.playOneShot(clip, volume);
}
});
}
}
/**
* @en
* play long audio, such as the bg music
* @zh
* 播放长音频,比如 背景音乐
* @param sound clip or url for the sound
* @param volume
*/
play(sound: AudioClip | string, volume: number = 1.0) {
if (sound instanceof AudioClip) {
this._audioSource.clip = sound;
this._audioSource.play();
this.audioSource.volume = volume;
}
else {
resources.load(sound, (err, clip: AudioClip) => {
if (err) {
console.log(err);
}
else {
this._audioSource.clip = clip;
this._audioSource.play();
this.audioSource.volume = volume;
}
});
}
}
/**
* stop the audio play
*/
stop() {
this._audioSource.stop();
}
/**
* pause the audio play
*/
pause() {
this._audioSource.pause();
}
/**
* resume the audio play
*/
resume(){
this._audioSource.play();
}
}
6、Web 平台的播放限制
目前 Web 平台的音频播放需要遵守最新的 Audio Play Policy,即使 AudioSource 组件设置了 playOnAwake
,也需要在第一次用户点击事件发生后,才会播放:
如图,当音乐开始播放后,有声音图标显示: