Construisez un système de karaoké automatique avec React et Vercel | de Joseph Nma | décembre 2022

Notre projet consiste à reconnaître une chanson à partir d’un échantillon audio, puis à afficher ses paroles à suivre. Nous pouvons utiliser ACRCloud pour la reconnaissance audio et Musixmatch pour fournir les paroles. De plus, nous aurons besoin de code backend pour interagir avec ces deux services. C’est pourquoi nous allons apprendre à mettre en place des fonctions sans serveur avec Vercel, pour ne pas avoir à créer de serveur.

Commençons par initialiser un projet Vite avec React et TypeScript.

Ensuite, nous utiliserons les packages NPM suivants pour être opérationnels :

npm i acrcloud formidable formidable-serverless jotai react-feather react-input-slider react-media-recorder
npm i -D @vercel/node @types/formidable

Nous avons besoin de certaines informations d’identification avant d’accéder à l’API ACRCloud. Si ce n’est déjà fait, créez un compte sur acrcloud.com et accédez à votre Projets de reconnaissance audio et vidéo. Sur un compte gratuit, vous êtes limité à un seul projet. Donc, si vous avez déjà un projet, utilisez les informations d’identification à partir de là. Sinon, créez un nouveau projet avec la configuration fournie.

Sois sûr que isrc est vérifié après avoir sélectionné le compartiment requis. Cela sera utile plus tard.

Copiez l’hôte, la clé d’accès et la clé secrète, puis collez-les dans un .env fichier à la racine du projet.

...
ACR_HOST="identify-eu-west-1.acrcloud.com"
ACR_ACCESS_KEY="INSERT_ACCESS_KEY"
ACR_SECRET="INSERT_SECRET_KEY"

Installez la CLI Vercel en utilisant npm i -g vercel . Courez maintenant npx vercel link pour lier le dossier à un projet Vercel. Vous pouvez soit lier un projet existant, soit en créer un nouveau à partir de la ligne de commande.

Une fois le projet lié, créez un api dossier qui stockera des fichiers séparés pour chacune de nos fonctions sans serveur. Créons notre première fonction pour identifier une chanson et retourner son ISRC.

Créer un nouveau fichier nommé acr-identify.ts dans ce dossier, qui contient notre code, accessible à http://localhost:[PORT]/api/acr-identify pour le frontal.

Comme ACRCloud, créez un compte sur Développeurs Musixmatch si vous ne l’avez pas déjà fait. Une fois que vous avez créé une application, rendez-vous sur Applications page pour trouver la clé API. Maintenant, ajoutez la clé API à votre .env dossier.

Nous utiliserons axios pour demander l’API, d’abord pour l’ID de piste Musixmatch pour un ISRC donné, puis pour les paroles de la piste. Nous utilisons la même approche que précédemment pour créer une fonction, mais maintenant à /api/find-lyrics. Ajoutez le code suivant au nouveau fichier :

La méthode HTTP utilisée par les fonctions sans serveur n’est pas spécifiée. Par conséquent, nous supposerons que le client fait une requête GET, nous lisons donc les paramètres d’URL pour obtenir l’ISRC.

Nous utilisons jotai pour gérer l’état de notre application React. Créer un /src/store.ts fichier et ajoutez les configurations atomiques suivantes :

Si aucune parole n’a été renvoyée, nous affichons un bouton de microphone pour l’utilisateur. Sinon, nous affichons les paroles et d’autres informations sur la chanson. Utilisez le code suivant dans /src/App.tsx:

Notez les utilisations du taux de chanson dans notre code. Plus tard, nous verrons comment mettre en surbrillance les mots des paroles afin que les utilisateurs puissent suivre.

Les erreurs de notre système de karaoké automatique impliquent souvent des chansons ou des paroles introuvables. Ainsi, nous pouvons fournir ces commentaires à l’utilisateur en utilisant un nouveau composant, /src/ErrorMessage.tsx.

Créons un nouveau MicrophoneInput composant à /src/MicrophoneInput.tsx. Ici, nous utiliserons react-media-recorder pour enregistrer une certaine longueur d’audio et envoyer l’échantillon à notre fonction sans serveur.

Commencez par définir la structure du fichier. Voici à quoi cela ressemble :

Nous avons besoin de fonctions pour mettre à jour l’état lors de l’interaction avec les fonctions sans serveur.

react-media-recorder nous fournit des crochets pour simplifier l’enregistrement multimédia dans React. Ici, nous ajoutons un gestionnaire d’événements d’arrêt qui soumet l’audio.

L’enregistrement démarre lorsque le bouton est cliqué et s’arrête une fois RECORD_DURATION millisecondes se sont écoulées.

Nous devons utiliser requestAnimationFrame pour mettre à jour l’état de notre animation de progression. À partir du code ci-dessus, l’animation montre une barre qui réduit sa hauteur pendant le processus d’enregistrement.

Et on met à jour la progression de l’animation avec cette fonction :

Et maintenant, nous pouvons créer une fonction pour soumettre le fichier audio, comme décrit précédemment.

Rendons maintenant un bouton qui intègre tout le code expliqué ci-dessus.

Dans /src/SongTitle.tsxcréez un composant pour afficher le titre du morceau identifié.

Nous allons utiliser react-input-slider pour créer un composant de curseur pour contrôler la vitesse du morceau. En réalité, les paroles ne seront pas toutes chantées au même rythme, mais l’utilisateur a toujours le contrôle sur la vitesse à laquelle il veut chanter en karaoké.

Si vous êtes intéressé par un suivi plus précis des paroles, consultez Synchronisation riche de Musixmatch.

Créer le dossier, /src/SongRateInput.tsxpuis ajoutez le code suivant pour le composant :

Pour suivre les paroles, chaque mot devra être mis en évidence individuellement, comme indiqué dans la démo.

Nous pouvons créer un dossier nommé lyrics à l’intérieur src. Le premier fichier de trois ici sera LyricsBody.tsx. Ce composant est chargé d’afficher tous les mots des paroles et de mettre à jour le mot en surbrillance actuel.

Nous utilisons requestAnimationFrame encore une fois ici pour faciliter la mise à jour de la couleur de surbrillance de chaque mot.

Mais notez comment nous analysons les paroles en segments avant de les rendre. Cette étape est cruciale pour que chaque mot puisse être stylisé individuellement.

Créer le parser.tsx dossier dans le lyrics dossier. N’oubliez pas de garder le .tsx extension afin que nous puissions utiliser les composants JSX.

Ce fichier exportera la fonction suivante pour décomposer les paroles en composants de mots individuels.

Créer un nouveau composant à /src/lyrics/LyricWord.tsx. Il nécessite l’index du mot et la valeur du mot lui-même.

Ensuite, les noms de classe sont appliqués au rendu <span> si l’index correspond à l’index du mot courant.

En conclusion, nous avons utilisé les fonctions sans serveur de Vercel pour identifier la musique et trouver les paroles des chansons. Ensuite, nous avons créé une interface frontale pour mettre en évidence les mots un par un et lier le tout.

Lors de l’exécution du projet, utilisez npx vercel dev pour vous assurer que les fonctions sans serveur sont disponibles.

Voici autre chose à considérer :

Les paroles renvoyées par Musixmatch n’étaient pas complètes. Leur plan gratuit ne comprend que 30% des paroles par chanson, et l’accès complet n’est disponible que via un plan d’entreprise.

Une alternative à Musixmatch pourrait être génie.com, car ils ont une API qui renvoie l’URL des paroles d’une chanson. Tout ce que nous aurions à faire serait d’accéder à leur API et de récupérer les paroles. Je publierai peut-être bientôt un article expliquant le web scraping et cette API.