Adding Sound Effects to Emojis in Video API Reference App for React

Introduction

The Vonage Video API Reference App for React provides a simple way to get started with developing a multi-party application. The code is maintained by the Vonage developers and community members. It comes with many great experiences, such as a waiting room where participants can add their username, select their video and audio devices; a meeting room where users can talk to one another, write in a chat, report an issue, and react with emojis. 

Wait, did someone say emojis? Emojis have become a standard way to communicate, whether to acknowledge someone, show how happy you are with your next project assignment, or simply to react to a funny video with a dancing dog emoji.

In this tutorial, we will explore ways to make emoji reactions even cooler 😎. One of those ways is to add sound effects for everyone to enjoy as someone sends out an emoji. 

Prerequisites

• Access to the Vonage Video API Reference App for React

• Node.js installed

• Basic knowledge of React

• Vonage API Account

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.

Let’s Get Started

Currently, the following emojis are added in the Video API Reference App for React: 

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

The cool thing about this app is that it is very easy to add new things such as new emojis that you love. Simply add them to the emoji map. 

To add the sound effects to the emoji, we’ll need to add a few things to our app:

• Start by creating a sounds folder inside the frontend/public directory. This will keep all sound assets organized in one place.

• After that, we are going to create a sound map to play a different sound for a different emoji based on the current list of supported ones. In order to do that, we are going to add the following sound map to frontend/src/utils/emojis folder. We’ll call it 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;

• Next, add a utility function to the existing frontend/src/utils/emojis/emojis.ts file to help us find the key (such as THUMBS_UP) in the original emojiMap. This helps determine which sound to play based on the emoji used. Therefore, add the following to the file:

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

• Although not exciting, this next step is essential for ensuring correct imports. The exports need to be updated in frontend/src/utils/emojis/index.ts:

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

export default emojiMap;
export { getEmojiKeyByChar };

• After this, we are going to update our useEmoji hook that can be found in the frontend/src/hooks directory. The first change we need to do here is to import the new emojiSoundMap we’ve added. Add the following to the top of the file:

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

• Next, import the utility function we created to match emoji characters to their keys. Go ahead and add the following below the emojiSoundMap import:

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

• We need to add a function to look up the sound we’d like to play and, well, play it. Good thing it’s pretty easy to do! 

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

• Almost there! Now, we just need to make a small change in the onEmoji handler that manages the signals sent by users in the room. Add the following right after where we are calling the setEmojiQueue:

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

• That’s it! Now you’ve added sounds to your emoji reaction in the multiparty meeting. This will make your daily stand up meetings so much more fun.

Conclusion

In this tutorial, we have explored an easy yet fun way to make your meetings more creative. The flexibility that the Vonage Video API Reference App for React offers is a great way to add fun enhancements like this one to make your meeting more enjoyable. 

Come join the conversation on our Vonage Community Slack or message us on X (formerly Twitter).