Plus d'une fois ces derniers temps, j'ai dû créer une sorte de composant de microphone React qui enregistre l'audio dans le navigateur, puis vous faites ce que vous voulez avec le blob audio que vous obtenez là ( stockez-le, transformez-le, utilisez-le avec une bibliothèque de transcription, peu importe).

Les composants disponibles dans la nature pour les microphones React ne sont… pas entretenus. Je vais généralement en rester là. Ils ne sont pas forcément mauvais, mais certains dépôts génèrent du spam, d’autres sont pleins de liens brisés, et la plupart d’entre eux que j’ai pu trouver n’ont pas été mis à jour depuis plus de quelques années.

Si tu veux que quelque chose soit fait, tu dois le faire toi-même

J'ai décidé de fabriquer l'un de ces composants à partir de zéro !

Voici un lien vers l'essentiel de 125 lignes si vous souhaitez simplement l'utiliser et ne pas avoir à lire le reste de cet article de blog. Tellement impatient. Mais je comprends. La vie est un défi.

De toute façon.

Il y a un tas de choses dont vous devez généralement tenir compte avec les microphones. Je n'ai pas approfondi la compatibilité des navigateurs avec celui-ci (je suis sûr que… Opera ou quelque chose aurait probablement des problèmes avec cela), mais il il y a de belles fonctionnalités intégrées de navigateur modernes qui vous amène assez loin, ici :

• navigator.mediaDevices : cela vous permet d'accéder au microphone de l'utilisateur (ou à la caméra, si vous le souhaitez)
• getUserMedia : cela vous permet d'obtenir l'autorisation de l'utilisateur pour les appareils multimédias susmentionnés et de produire un flux multimédia.
• MediaRecorder : cela vous permet d'enregistrer des choses

Tous ces éléments sont combinés avec des variables d'état React pour suivre chacun d'eux, un useEffect pour effectuer des tâches côté navigateur, puis une balise

C'est bien sûr plus facile à dire qu'à faire, c'est pourquoi j'ai tout mis dans un résumé à copier-coller. En dehors de la fonctionnalité de base, j'ai également créé une variable pour une durée d'enregistrement maximale (vous n'en avez pas besoin, mais si vous souhaitez transcrire quelque chose ou télécharger quelque chose, je pense que les limites sont bonnes), et quelques petits styles Tailwind pour en montrer animations autour du bouton.

Utilisez le composant. Enregistrez vos rêves.