adding sound effects in agora web sdk

Question

I have a web meeting app called TweetUp made using Agora App Builder. Now, I want to add sound effects on user join, user disconnect, notification etc.

Answer 1

Assuming you are on the latest version of AgoraAppBuilder Core (2.1.0)

Here are the ways you can achieve your use cases

user join, user disconnect

In your app navigate to {APP-Name}/src/pages/VideoCall.tsx

Navigate to your PropsProvider component.

It might look something like this,

<PropsProvider
    value={{
        rtcProps: {
            ...rtcProps,
            callActive,
        },
        callbacks, // --> callbacks for events
        ...restProps
}}>

look for the callbacks props, callbacks props take an object type:

export interface CallbacksInterface {    
  UserJoined: () => {};
  UserOffline: () => {};
  ...otherCallbacks

If you want to register callbacks for userJoined or offline(disconnect), you can pass the callbacks to your PropsProvider

const playSound = () => {
    let src ='http://commondatastorage.googleapis.com/codeskulptor-assets/sounddogs/explosion.mp3';
    let audio = new Audio(src);
    audio.play();
}

<PropsProvider
    value={{
        .
        .
        callbacks= {
              UserOffline: () =>{
                  console.log('User offline')
                  playSound()
              },
              UserJoined: () => {
                  console.log('User Joined')
                  playSound()
              }
            .
        }
        .
    }}
}}>

Similarly for message received notifications, you can use the events object. Within your VideoCall component use:

const {events} = useContext(ChatContext);

Once you have access to the events object, register your custom events for handling public and private messages.

events.on(
  messageChannelType.Public,
  'onPublicMessageReceived',
  (data: any, error: any) => {
    if (!data) return;
    playSound()
  },
);
events.on(
  messageChannelType.Private,
  'onPrivateMessageReceived',
  .
  .
  .

There are plans for releasing a newer version of the Agora App Builder Core, with the new release you'll have access to Agora AppBuilder Extension API's. Extension API's will enable to enhance/add newer functionalities to your app without ever touching the core code base.