Audio Playback Examples

Since Cocos Creator 3.x removes the v2.x cc.audioEngine series API and uses AudioSource to control audio playback, it is necessary to declare the AudioSource component as the resident root node and wrap a manager to use it. You can refer to the following code:

  1. import { assert, AudioSource, Component, game } from 'cc';
  2. const { ccclass, property } = _decorator;
  4. @ccclass('GameRoot')
  5. export class GameRoot extends Component {
  7.     @property(AudioSource) 
  8.     _audioSource: AudioSource = null!
  10.     onLoad () {
  11.         const audioSource = this.node.getComponent(AudioSource)! ;
  12.         assert(audioSource);
  13.         this._audioSource = audioSource;
  14.         // Declare the resident root node, which will not be destroyed in a scene switch. The target node must be the root node, otherwise it is invalid.
  15.         game.addPersistRootNode(this.node);
  17.         // Wrap the node in the manager.
  18.         audioManager.instance.init(this._audioSource);
  19.     }
  20. }

The specific implementation of the audio manager can be found in the following code:

  1. import { AudioClip, AudioSource, assert, warn, clamp01, resources } from "cc";
  2. export class audioManager {
  4.     private static _instance: audioManager;
  5.     private static _audioSource?: AudioSource;
  7.     static get instance () {
  8.         if (this._instance) {
  9.             return this._instance;
  10.         }
  12.         this._instance = new audioManager();
  13.         return this._instance;
  14.     }
  16.     /**Manager initialization*/
  17.     init (audioSource: AudioSource) {
  18.         audioManager._audioSource = audioSource;
  19.     }
  21.       /**
  22.      * Play music
  23.      * @param {Boolean} loop Whether to loop
  24.      */
  25.     playMusic (loop: boolean) {
  26.         const audioSource = audioManager._audioSource!
  27.         assert(audioSource, 'AudioManager not inited!');
  29.         audioSource.loop = loop;
  30.         if (!audioSource.playing) {
  31.             audioSource.playing();
  32.         }
  33.     }
  35.      /**
  36.      * Play a sound effect
  37.      * @param {String} name The name of the sound effect
  38.      * @param {Number} volumeScale Playback volume multiplier
  39.      */
  40.     playSound (name: string, volumeScale: number = 1 ) {
  41.         const audioSource = audioManager._audioSource!
  42.         assert(audioSource, 'AudioManager not inited!');
  44.         // Note that the second parameter "volumeScale" is a multiple of the playback volume, the final playback volume is "audioSource.volume * volumeScale"
  45.         audioSource.playOneShot(audioClip, volumeScale);
  47.     }
  48.     // Set the music volume
  49.     setMusicVolume (flag: number) {
  50.         const audioSource = audioManager._audioSource!
  51.         assert(audioSource, 'AudioManager not inited!');
  53.         flag = clamp01(flag);
  54.         audioSource.volume = flag;
  55.     }
  57. }

The above code snippet is just an example of one way to use the AudioSource component for playback, and is not complete. Cocos Creator provides a complete example of how to use the wrapped audio playback manager in the tutorial-taxi-game project. Developers can open the Project page in Dashboard, click the New button in the bottom right corner to enter the New Project page, and find the Example Taxi Game, fill in the project name and project location as needed to create and open.

audioEdit