Hinzufügen von Soundeffekten zu Emojis in der Video API Reference App für React

Einführung

Die Vonage Video-API-Referenzanwendung für React bietet einen einfachen Einstieg in die Entwicklung einer Multi-Party-Anwendung. Der Code wird von den Entwicklern und Community-Mitgliedern von Vonage gepflegt. Sie bietet viele großartige Erlebnisse, wie z. B. einen Warteraum, in dem die Teilnehmer ihren Benutzernamen hinzufügen und ihre Video- und Audiogeräte auswählen können; einen Besprechungsraum, in dem die Benutzer miteinander sprechen, in einem Chat schreiben, ein Problem melden und mit Emojis reagieren können.

Moment, hat jemand Emojis gesagt? Emojis sind zu einem Standardkommunikationsmittel geworden, sei es, um jemandem zu danken, zu zeigen, wie sehr man sich über den nächsten Projektauftrag freut, oder einfach, um auf ein lustiges Video mit einem tanzenden Hundeemoji zu reagieren.

In diesem Tutorial werden wir herausfinden, wie man Emoji-Reaktionen noch cooler machen kann 😎. Eine dieser Möglichkeiten ist das Hinzufügen von Soundeffekten, die jeder genießen kann, wenn jemand ein Emoji sendet.

Voraussetzungen

• Zugriff auf die Vonage Video-API-Referenzanwendung für React

• Node.js installiert

• Grundkenntnisse in React

• Vonage API-Konto

Vonage API-Konto

Um dieses Tutorial durchzuführen, benötigen Sie ein Vonage API-Konto. Wenn Sie noch keines haben, können Sie sich noch heute anmelden und mit einem kostenlosen Guthaben beginnen. Sobald Sie ein Konto haben, finden Sie Ihren API-Schlüssel und Ihr API-Geheimnis oben auf dem Vonage-API-Dashboard.

Sind Sie bereit, mit dem Bau zu beginnen?

Erleben Sie nahtlose Konnektivität, Echtzeit-Messaging und kristallklare Sprach- und Videoanrufe - alles auf Knopfdruck.

Fangen wir an

Derzeit sind die folgenden Emojis in der Video-API-Referenz-App für React enthalten:

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

Das Tolle an dieser App ist, dass es sehr einfach ist, neue Dinge hinzuzufügen, wie z. B. neue Emojis, die du liebst. Füge sie einfach zur Emoji-Karte.

Um die Soundeffekte zu den Emoji hinzuzufügen, müssen wir unserer App ein paar Dinge hinzufügen:

• Beginnen Sie mit der Erstellung einer sounds Ordner innerhalb des frontend/public Verzeichnis. Dadurch werden alle Sound-Assets an einem Ort organisiert.

• Danach werden wir eine Soundkarte erstellen, um einen anderen Sound für ein anderes Emoji auf der Grundlage der aktuellen Liste der unterstützten Emoji abzuspielen. Zu diesem Zweck fügen wir die folgende Sound-Map zu frontend/src/utils/emojis Ordner. Wir nennen sie 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;

• Als nächstes fügen Sie eine Dienstprogrammfunktion zur bestehenden frontend/src/utils/emojis/emojis.ts Datei eine Funktion hinzu, die uns hilft, die Taste zu finden (z.B. THUMBS_UP) in der ursprünglichen emojiMap. Dies hilft bei der Bestimmung des Tons, der je nach verwendetem Emoji abgespielt wird. Fügen Sie daher Folgendes in die Datei ein:

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

• Dieser nächste Schritt ist zwar nicht aufregend, aber unerlässlich, um korrekte Importe zu gewährleisten. Die Exporte müssen aktualisiert werden in frontend/src/utils/emojis/index.ts aktualisiert werden:

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

export default emojiMap;
export { getEmojiKeyByChar };

• Danach werden wir unsere useEmoji Haken, der sich in der Datei frontend/src/hooks Verzeichnis zu finden ist. Die erste Änderung, die wir hier vornehmen müssen, ist der Import der neuen emojiSoundMap die wir hinzugefügt haben. Fügen Sie das Folgende am Anfang der Datei hinzu:

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

• Als Nächstes importieren Sie die Dienstprogrammfunktion, die wir erstellt haben, um die Emoji-Zeichen den entsprechenden Tasten zuzuordnen. Fügen Sie das Folgende unter der Funktion emojiSoundMap importieren:

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

• Wir müssen eine Funktion hinzufügen, die den gewünschten Sound sucht und, nun ja, abspielt. Zum Glück ist das ziemlich einfach zu machen!

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

• Fast geschafft! Jetzt müssen wir nur noch eine kleine Änderung in der onEmoji Handler vornehmen, der die von den Benutzern im Raum gesendeten Signale verwaltet. Füge das Folgende direkt nach dem Aufruf der setEmojiQueue:

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

• Das war's! Jetzt haben Sie Ihrer Emoji-Reaktion im Mehrparteien-Meeting Töne hinzugefügt. So machen Ihre täglichen Stand-up-Meetings viel mehr Spaß.

Schlussfolgerung

In diesem Tutorial haben wir eine einfache, aber unterhaltsame Möglichkeit erkundet, Ihre Meetings kreativer zu gestalten. Die Flexibilität, die die Vonage Video API Reference App für React bietet, ist eine großartige Möglichkeit, lustige Erweiterungen wie diese hinzuzufügen, um Ihr Meeting angenehmer zu gestalten.

Beteiligen Sie sich am Gespräch auf unserem Vonage Community Slack oder senden Sie uns eine Nachricht auf X (ehemals Twitter).