1、 Cocos Creator 支持音頻格式

目前 Cocos Creator 支持以下格式的音頻文件：

2、 Cocos Creator 音頻資源生成

Cocos Creator 直接將音頻文件拖拽到 資源管理器 面板， 會生成相應(yīng)的音頻資源（AudioClip）。

3、AudioSource 組件播放音樂

AudioSource 組件的屬性說明：

使用AudioSource 組件播放音頻步驟：

（1）、在層級管理器中，創(chuàng)建播放音頻的節(jié)點

（2）、資源管理器中添加腳本

這里測試命名為：AudioSourceControl.ts

（3）、在 層級管理器 中綁定腳本

將資源管理器中的腳本文件AudioSourceControl.ts 拖拽到層級管理器中：

（4）、層級管理器中添加 AudioSource 組件

點擊 屬性檢查器 下方的 添加組件 按鈕，選擇 Audio -> AudioSource 即可添加 AudioSource 組件到節(jié)點上。

添加節(jié)點后如下：

將資源管理器中的音頻文件拖拽到屬性檢查器中，audiosource 組件的 clip 資源中：

（5）、AudioSourceControl.ts 中添加AudioSource 屬性，并實現(xiàn)播放聲音

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）、 播放狀態(tài)的監(jiān)聽

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 組件播放音效

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

• 播放時間短
• 同時播放的數(shù)量多

AudioSource 組件提供 playOneShot 接口來播放音效。

輸入?yún)?shù):

playOneShot 是一次性播放操作，播放后的音效無法暫停或停止播放，也無法監(jiān)聽播放結(jié)束的事件回調(diào)。

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 是一次性播放操作，播放后的音效無法暫?；蛲Ｖ共シ牛矡o法監(jiān)聽播放結(jié)束的事件回調(diào).

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
 * 這是一個用于播放音頻的單件類，可以很方便地在項目的任何地方調(diào)用。
 */ 
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 創(chuàng)建一個節(jié)點作為 AudioManager
        let audioMgr = new Node();
        audioMgr.name = '__audioMgr__';

        //@en add to the scene.
        //@zh 添加節(jié)點到場景
        director.getScene().addChild(audioMgr);

        //@en make it as a persistent node, so it won't be destroied when scene change.
        //@zh 標(biāo)記為常駐節(jié)點，這樣場景切換的時候就不會被銷毀了
        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 組件設(shè)置了 playOnAwake，也需要在第一次用戶點擊事件發(fā)生后，才會播放：

如圖，當(dāng)音樂開始播放后，有聲音圖標(biāo)顯示：

文章來源地址http://www.zghlxwxcb.cn/news/detail-839398.html

到了這里，關(guān)于CocosCreator3.8研究筆記（十三）CocosCreator 音頻資源理解的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！