Créer un composant de microphone React simple

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 nécessairement mauvais, mais certains référentiels conduisent au spam, certains sont pleins de liens rompus, 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 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.

Quoi qu'il en soit.

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é du navigateur avec celui-ci (je suis sûr que… Opera ou quelque chose aurait probablement des problèmes avec ça), mais il existe quelques fonctionnalités de navigateur modernes intégrées intéressantes qui allez assez loin, ici :

• navigator.mediaDevices : cela vous permet d'accéder au microphone (ou à la caméra, si vous le souhaitez) de l'utilisateur
• 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 un module

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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!