Adicionando efeitos sonoros aos emojis no aplicativo de referência da Video API para React

Introdução

O Aplicativo de referência da Video API da Vonage para React oferece uma maneira simples de começar a desenvolver um aplicativo com múltiplos participantes. O código é mantido pelos desenvolvedores da Vonage e pelos membros da comunidade. Ele oferece diversos recursos interessantes, como uma sala de espera onde os participantes podem adicionar seu nome de usuário e selecionar seus dispositivos de Video e áudio; e uma sala de reunião onde os usuários podem conversar entre si, escrever no chat, relatar um problema e reagir com emojis. 

Espere aí, alguém falou em emojis? Os emojis se tornaram uma forma comum de se comunicar, seja para responder a alguém, mostrar como você está feliz com a sua próxima tarefa no projeto ou simplesmente para reagir a um Video engraçado com um emoji de cachorro dançando.

Neste tutorial, vamos explorar maneiras de deixar as reações com emojis ainda mais legais 😎. Uma dessas maneiras é adicionar efeitos sonoros para que todos possam curtir quando alguém enviar um emoji. 

Pré-requisitos

• Acesso ao Aplicativo de referência da Video API da Vonage para React

• Node.js instalado

• Conhecimentos básicos de React

• Account da API da Vonage

Vamos começar

Atualmente, os seguintes emojis foram adicionados ao aplicativo de referência da Video API para React: 

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

O legal desse aplicativo é que é muito fácil adicionar coisas novas, como novos emojis que você adora. Basta adicioná-los ao mapa de emojis. 

Para adicionar os efeitos sonoros ao emoji, precisaremos incluir alguns elementos em nosso aplicativo:

• Comece criando um pasta dentro da pasta diretório frontend/public . Isso manterá todos os recursos de som organizados em um único local.

• Depois disso, vamos criar um mapa de sons para reproduzir um som diferente para cada emoji, com base na lista atual de emojis compatíveis. Para isso, vamos adicionar o seguinte mapa de sons a pasta frontend/src/utils/emojis . Vamos chamá-lo de 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;

• Em seguida, adicione uma função utilitária ao arquivo existente frontend/src/utils/emojis/emojis.ts para nos ajudar a encontrar a chave (como THUMBS_UP) no arquivo original emojiMap. Isso ajuda a determinar qual som deve ser reproduzido com base no emoji utilizado. Portanto, adicione o seguinte ao arquivo:

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

• Embora não seja muito empolgante, esta próxima etapa é essencial para garantir que as importações sejam feitas corretamente. As exportações precisam ser atualizadas em frontend/src/utils/emojis/index.ts:

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

export default emojiMap;
export { getEmojiKeyByChar };

• Depois disso, vamos atualizar nosso hook useEmoji , que pode ser encontrado em frontend/src/hooks . A primeira alteração que precisamos fazer aqui é importar o novo emojiSoundMap que adicionamos. Adicione o seguinte no início do arquivo:

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

• Em seguida, importe a função utilitária que criamos para associar os caracteres emoji às respectivas chaves. Adicione o seguinte abaixo do emojiSoundMap :

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

• Precisamos adicionar uma função para localizar o som que queremos reproduzir e, bem, reproduzi-lo. Ainda bem que é bem fácil de fazer! 

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

• Está quase pronto! Agora, só precisamos fazer uma pequena alteração no onEmoji que gerencia os sinais enviados pelos usuários na sala. Adicione o seguinte logo após o ponto em que estamos chamando o setEmojiQueue:

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

• É isso aí! Agora você adicionou sons à sua reação com emojis na reunião com vários participantes. Isso vai deixar suas reuniões diárias de stand-up muito mais divertidas.

Conclusão

Neste tutorial, exploramos uma maneira fácil e divertida de tornar suas reuniões mais criativas. A flexibilidade que o aplicativo de referência da Video API da Vonage para React oferece é uma ótima maneira de adicionar recursos divertidos como esse, para tornar sua reunião mais agradável. 

Venha participar da conversa na nossa Slack da Comunidade Vonage ou envie uma mensagem para nós no X (antigo Twitter).