Ajouter des effets sonores aux Emojis dans l'application de référence Video API pour React

Introduction

L'application de référence de l'API vidéo de Vonage In-App Video API Video de référence pour React offre un moyen simple de commencer à développer une application multipartite. Le code est maintenu par les développeurs de Vonage et les membres de la communauté. Il est livré avec de nombreuses expériences formidables, telles qu'une salle d'attente où les participants peuvent ajouter leur nom d'utilisateur, sélectionner leurs appareils vidéo et audio ; une salle de réunion où les utilisateurs peuvent se parler, écrire dans un chat, signaler un problème et réagir avec des emojis.

Attendez, quelqu'un a dit "emojis" ? Les emojis sont devenus un moyen de communication standard, que ce soit pour remercier quelqu'un, montrer à quel point vous êtes heureux de votre prochaine mission de projet, ou simplement pour réagir à une vidéo amusante avec un emoji de chien dansant.

Dans ce tutoriel, nous allons explorer les moyens de rendre les réactions des emoji encore plus cool 😎. L'un de ces moyens consiste à ajouter des effets sonores pour que tout le monde puisse en profiter lorsque quelqu'un envoie un emoji.

Conditions préalables

• Accès à l'application de référence Application de référence de l'In-App Video API Video pour React

• Node.js installé

• Connaissance de base de React

• Compte API 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.

Commençons

Actuellement, les emojis suivants sont ajoutés dans l'application de référence de l'API Video pour React :

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

Ce qui est génial avec cette application, c'est qu'il est très facile d'ajouter de nouvelles choses, comme les nouveaux emojis que vous aimez. Il suffit de les ajouter à la carte des emojis.

Pour ajouter les effets sonores aux emoji, nous devons ajouter quelques éléments à notre application :

• Commencez par créer un sons dans le dossier frontend/public dans le répertoire frontend/public. Cela permettra d'organiser toutes les ressources sonores en un seul endroit.

• Ensuite, nous allons créer une carte sonore pour jouer un son différent pour un emoji différent basé sur la liste actuelle des emoji supportés. Pour ce faire, nous allons ajouter la carte sonore suivante à frontend/src/utils/emojis dans le dossier frontend/src/utils/emojis. Nous l'appellerons 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;

• Ensuite, ajoutez une fonction utilitaire au fichier frontend/src/utils/emojis/emojis.ts pour nous aider à trouver la clé (telle que THUMBS_UP) dans le fichier original emojiMap. Cela permet de déterminer le son à jouer en fonction de l'emoji utilisé. Ajoutez donc ce qui suit au fichier :

// 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);
};

• Bien que peu excitante, cette étape est essentielle pour garantir des importations correctes. Les exportations doivent être mises à jour dans frontend/src/utils/emojis/index.ts :

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

export default emojiMap;
export { getEmojiKeyByChar };

• Après cela, nous allons mettre à jour notre useEmoji qui se trouve dans le fichier frontend/src/hooks dans le répertoire frontend/src/hooks. Le premier changement que nous devons faire ici est d'importer le nouveau hook emojiSoundMap que nous avons ajouté. Ajoutez ce qui suit au début du fichier :

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

• Ensuite, importez la fonction utilitaire que nous avons créée pour faire correspondre les caractères emoji à leurs clés. Ajoutez ce qui suit sous la fonction emojiSoundMap import :

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

• Nous devons ajouter une fonction pour rechercher le son que nous voulons jouer et, bien sûr, le jouer. Heureusement, c'est assez facile à faire !

// 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);
   });
};

• Nous y sommes presque ! Il ne nous reste plus qu'à apporter une petite modification à la fonction onEmoji qui gère les signaux envoyés par les utilisateurs dans la salle. Ajoutez ce qui suit juste après l'appel à la fonction setEmojiQueue:

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

• Voilà, c'est fait ! Vous avez maintenant ajouté des sons à votre réaction emoji dans la réunion multipartite. Cela rendra vos réunions quotidiennes beaucoup plus amusantes.

Conclusion

Dans ce tutoriel, nous avons exploré un moyen simple et amusant de rendre vos réunions plus créatives. La flexibilité qu'offre l'application de référence de l'API Video de Vonage pour React est un excellent moyen d'ajouter des améliorations amusantes comme celle-ci pour rendre votre réunion plus agréable.

Venez rejoindre la conversation sur notre Communauté Vonage Slack ou envoyez-nous un message sur X (anciennement Twitter).