Volume Change

Feature Overview

In karaoke scenarios, it is often necessary to play multiple streams and display which users are speaking. ZEGO provides the ability to identify whether a user is speaking and the volume of their speech (sound wave), which is convenient for developers to display on the UI. For example:

Example Source Code Download

Please refer to Download Example Source Code to get the source code.

For related source code, please check the file "src/Examples/AdvancedAudioProcessing/SoundLevelAndAudioSpectrum".

Prerequisites

Before listening to volume changes, ensure that:

• You have created a project in the ZEGOCLOUD Console, and applied for a valid AppID and Server address. For details, please refer to Console - Project Information.
• You have integrated the ZEGO Express SDK into the project and implemented basic audio and video stream publishing and playing functions. For details, please refer to Quick Start - Integration and Quick Start - Implementation.

RTC / L3 Usage Steps

1. Listen to the sound wave callback interface and register the soundLevelUpdate callback to receive changes in stream volume.

zg.on('soundLevelUpdate', (streamList) => {
    streamList.forEach(stream => {
        stream.type == 'push' && $('#soundLevel').html(Math.round(stream.soundLevel) + '');
        console.warn(`${stream.type} ${stream.streamID}, soundLevel: ${stream.soundLevel}`);
    });
});

zg.on('soundLevelUpdate', (streamList) => {
    streamList.forEach(stream => {
        stream.type == 'push' && $('#soundLevel').html(Math.round(stream.soundLevel) + '');
        console.warn(`${stream.type} ${stream.streamID}, soundLevel: ${stream.soundLevel}`);
    });
});

2. Start sound wave monitoring, call the setSoundLevelDelegate interface to start monitoring volume, and set the sound wave callback interval in ms.

   zg.setSoundLevelDelegate(true, 1000);

   zg.setSoundLevelDelegate(true, 1000);

3. Stop sound wave monitoring, call the setSoundLevelDelegate interface to stop monitoring volume.

   zg.setSoundLevelDelegate(false);

   zg.setSoundLevelDelegate(false);

Player Plugin Scenario Usage Steps

1. Listen to the player plugin sound wave callback interface and register the onSoundLevelUpdate callback to receive changes in stream volume.

// player is the player plugin ZegoExpressPlayer instance
player.onSoundLevelUpdate = (level) => {
  // level is the volume of the player
  console.warn("onSoundLevelUpdate",level)
}

// player is the player plugin ZegoExpressPlayer instance
player.onSoundLevelUpdate = (level) => {
  // level is the volume of the player
  console.warn("onSoundLevelUpdate",level)
}

2. Start sound wave monitoring, call the enableSoundLevelMonitor interface to start monitoring volume, and set the sound wave callback interval in ms.

player.enableSoundLevelMonitor(true, 1000);

player.enableSoundLevelMonitor(true, 1000);

3. Stop sound wave monitoring, call the enableSoundLevelMonitor interface to stop monitoring volume.

player.enableSoundLevelMonitor(false);

player.enableSoundLevelMonitor(false);

Stream Mixing Scenario Usage Steps

1. When calling startMixerTask, you need to configure stream mixing ZegoMixStreamConfig, set enableSoundLevel to true, and configure soundLevelID for inputList. For details, please refer to Stream Mixing.

   const mixConfig = {
       "taskID": "custom-task",
       "enableSoundLevel": true,
       "inputList": [
           {
               "streamID": streamID1,
               "soundLevelID": soundLevelID1,
               "layout": {
                   "top": 0,
                   "left": 0,
                   "bottom": 200,
                   "right": 200
               }
           },
           {
               "streamID": streamID2,
               "soundLevelID": soundLevelID2,
               "layout": {
                   "top": 200,
                   "left": 200,
                   "bottom": 400,
                   "right": 400
               }
           }
       ],
       "outputList": [
           "custom-mixwebrtc-1"
       ],
       "outputConfig": {
           "outputBitrate": 300,
           "outputFPS": 15,
           "outputWidth": 400,
           "outputHeight": 400
       }
   }
   zg.startMixerTask(mixConfig);

   const mixConfig = {
       "taskID": "custom-task",
       "enableSoundLevel": true,
       "inputList": [
           {
               "streamID": streamID1,
               "soundLevelID": soundLevelID1,
               "layout": {
                   "top": 0,
                   "left": 0,
                   "bottom": 200,
                   "right": 200
               }
           },
           {
               "streamID": streamID2,
               "soundLevelID": soundLevelID2,
               "layout": {
                   "top": 200,
                   "left": 200,
                   "bottom": 400,
                   "right": 400
               }
           }
       ],
       "outputList": [
           "custom-mixwebrtc-1"
       ],
       "outputConfig": {
           "outputBitrate": 300,
           "outputFPS": 15,
           "outputWidth": 400,
           "outputHeight": 400
       }
   }
   zg.startMixerTask(mixConfig);

2. Call the mixerSoundLevelUpdate interface to listen to stream mixing volume changes.

   zg.on("mixerSoundLevelUpdate", (mixMap, id) => {
       console.warn("mixerSoundLevelUpdate", mixMap, id);
     });

   zg.on("mixerSoundLevelUpdate", (mixMap, id) => {
       console.warn("mixerSoundLevelUpdate", mixMap, id);
     });

3. Play the stream based on the mixed streamID. If you need to get the mixed stream volume value, you need to enable SEI. For details, please refer to Supplemental Enhancement Information (SEI).

// Play stream
zg.startPlayingStream(mixStreamID, {
    // Enable parsing SEI
    isSEIStart: true
}).then(stream => {

}).catch(err => {

});

// Play stream
zg.startPlayingStream(mixStreamID, {
    // Enable parsing SEI
    isSEIStart: true
}).then(stream => {

}).catch(err => {

});