adding sound effects in agora web sdk

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.

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.