• CocosCreator3.8研究笔记（十三）CocosCreator 音频资源理解


    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();
   }
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40

    （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();
    }
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63

    在这里插入图片描述


    4、AudioSource 组件播放音效

    音效播放一般有以下特点：

    • 播放时间短
    • 同时播放的数量多

    AudioSource 组件提供 playOneShot 接口来播放音效。

    输入参数:

    名称类型描述
    volumenumber音量 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);
    }
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    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();
    }
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115

    6、Web 平台的播放限制

    目前 Web 平台的音频播放需要遵守最新的 Audio Play Policy，即使 AudioSource 组件设置了 playOnAwake，也需要在第一次用户点击事件发生后，才会播放：


    如图，当音乐开始播放后，有声音图标显示：


    在这里插入图片描述


  • 相关阅读:
    Java 线程池之任务拒绝策略
    如何处理 form 表单提交后的响应信息？
    Docker部署深度学习模型
    Text-to-SQL小白入门（六）Awesome-Text2SQL项目介绍
    linux c语言密码验证
    前端框架的演进之路：从静态网页到现代交互体验的探索
    264_BOOST中的Json库解析_BOOST_AUTO(itrpromodel, doc.FindMember(“productmodel“))；
    java计算机毕业设计天津城建大学校友录管理系统源程序+mysql+系统+lw文档+远程调试
    【LeetCode力扣】234 快慢指针 | 反转链表 | 还原链表
    JavaScript【CSS操作、事件处理程序、DOM0级事件处理、DOM2级事件处理、事件类型之鼠标事件、事件流 、Event事件对象、事件类型之键盘、事件事件类型之表单】(十三)
  • 原文地址：https://blog.csdn.net/lizhong2008/article/details/132789491