• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

111
Vistas
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.

about 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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.

about 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda