Añadir efectos de sonido a Emojis en Video API Reference App para React

Introducción

La Aplicación de referencia de la API de Video de Vonage para React ofrece una forma sencilla de empezar a desarrollar una aplicación multipartita. El código es mantenido por los desarrolladores de Vonage y los miembros de la comunidad. Viene con muchas experiencias geniales, como una sala de espera donde los participantes pueden añadir su nombre de usuario, seleccionar sus dispositivos de vídeo y audio; una sala de reuniones donde los usuarios pueden hablar entre ellos, escribir en un chat, informar de un problema y reaccionar con emojis.

Espera, ¿alguien ha dicho emojis? Los emojis se han convertido en una forma habitual de comunicarse, ya sea para dar las gracias a alguien, mostrar lo contento que estás con la asignación de tu próximo proyecto o simplemente para reaccionar ante un vídeo divertido con un emoji de un perro bailando.

En este tutorial, exploraremos formas de hacer que las reacciones emoji sean aún más geniales 😎. Una de esas maneras es añadir efectos de sonido para que todos disfruten cuando alguien envía un emoji.

Requisitos previos

• Acceso a la Aplicación de referencia de la API de Video de Vonage para React

• Node.js instalado

• Conocimientos básicos de React

• Cuenta API de Vonage

Vonage API Account

To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.

Ready to start building?

Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls—all at your fingertips.

Empecemos

Actualmente, los siguientes emojis están añadidos en la Video API Reference App para React:

Emojis currently supported in the Vonage Video API Reference App for React, ready for sound effect mapping.

Lo bueno de esta aplicación es que es muy fácil añadir cosas nuevas, como nuevos emojis que te gusten. Basta con añadirlos al mapa emoji.

Para añadir los efectos de sonido a los emoji, tendremos que añadir algunas cosas a nuestra aplicación:

• Empiece por crear un sonidos dentro de la carpeta frontend/público directorio. Esto mantendrá todos los recursos de sonido organizados en un solo lugar.

• Después, vamos a crear un mapa de sonido para reproducir un sonido diferente para un emoji diferente basado en la lista actual de los soportados. Para ello, vamos a añadir el siguiente mapa de sonido a frontend/src/utils/emojis . Lo llamaremos emojiSoundMap.ts:

// File: frontend/src/utils/emojis/emojiSoundMap.ts
const emojiSoundMap: Record<string, string> = {
  THUMBS_UP: '/sounds/sound1.mp3',
  THUMBS_DOWN: '/sounds/sound2.mp3',
  WAVE: '/sounds/sound3.mp3',
  CLAP: '/sounds/sound4.mp3',
  ROCKET: '/sounds/sound5.mp3',
  CELEBRATION: '/sounds/sound6.mp3',
  PRAY: '/sounds/sound7.mp3',
  FLEX: '/sounds/sound8.mp3',
  HEART: '/sounds/sound9.mp3',
  CRY: '/sounds/sound10.mp3',
  ASTONISHED: '/sounds/sound11.mp3',
  JOY: '/sounds/sound12.mp3',
  default: '/sounds/sound13.mp3',
};

export default emojiSoundMap;

• A continuación, añada una función de utilidad al archivo frontend/src/utils/emojis/emojis.ts para ayudarnos a encontrar la clave (como PULSAR_ARRIBA) en el archivo emojiMap. Esto ayuda a determinar qué sonido reproducir en función del emoji utilizado. Por lo tanto, añadir lo siguiente al archivo:

// File: frontend/src/utils/emojis/emojis.ts
export const getEmojiKeyByChar = (emojiChar: string): string | undefined => {
  return Object.keys(emojiMap).find((key) => emojiMap[key as keyof typeof emojiMap] === emojiChar);
};

• Aunque no es emocionante, este paso siguiente es esencial para garantizar importaciones correctas. Es necesario actualizar las exportaciones en frontend/src/utils/emojis/index.ts:

// File: frontend/src/utils/emojis/index.ts
import emojiMap, { getEmojiKeyByChar } from './emojis';

export default emojiMap;
export { getEmojiKeyByChar };

• Después de esto, vamos a actualizar nuestro useEmoji que se encuentra en frontend/src/hooks directorio. El primer cambio que tenemos que hacer aquí es importar el nuevo emojiSoundMap que hemos añadido. Añade lo siguiente al principio del archivo:

// File: frontend/src/hooks/useEmojis.tsx
import emojiSoundMap from '../utils/emojis/emojiSoundMap';

• A continuación, importa la función de utilidad que creamos para emparejar los caracteres emoji con sus teclas. Añade lo siguiente debajo de la función emojiSoundMap import:

// File: frontend/src/hooks/useEmojis.tsx
import { getEmojiKeyByChar } from '../utils/emojis';

• Tenemos que añadir una función para buscar el sonido que nos gustaría reproducir y, bueno, reproducirlo. ¡Lo bueno es que es bastante fácil de hacer!

// File: frontend/src/hooks/useEmojis.tsx
const playEmojiSound = (emojiChar: string) => {
    const emojiKey = getEmojiKeyByChar(emojiChar);
    // We look up the sound for the emoji, defaulting to a generic sound if not found.
    const soundSource = (emojiKey && emojiSoundMap[emojiKey]) || emojiSoundMap.default;
    const audio = new Audio(soundSource);
    // Play the emoji sound at full volume so everyone can hear it
    audio.volume = 1;
    audio.play().catch((error) => {
      console.error('Error playing emoji sound:', error);
   });
};

• Ya casi está. Ahora, sólo tenemos que hacer un pequeño cambio en el método onEmoji que gestiona las señales enviadas por los usuarios de la sala. Añade lo siguiente justo después de donde estamos llamando a la función setEmojiQueue:

// File: frontend/src/hooks/useEmojis.tsx
// Play sound when emoji is received
playEmojiSound(emoji);

• Ya está. Ahora has añadido sonidos a tu reacción emoji en la reunión multipartita. Esto hará que tus reuniones diarias de pie sean mucho más divertidas.

Conclusión

En este tutorial, hemos explorado una forma fácil pero divertida de hacer que tus reuniones sean más creativas. La flexibilidad que ofrece la aplicación de referencia de la API de Video de Vonage para React es una excelente manera de agregar mejoras divertidas como esta para que tu reunión sea más amena.

Únete a la conversación en nuestro Slack de la comunidad de Vonage o envíanos un mensaje en X (antes Twitter).