Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

146
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 4 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 4 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 Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda