Más de una vez últimamente he tenido que crear algún tipo de componente de micrófono React que grabe audio en el navegador, y luego haces lo que quieras con el blob de audio que obtienes allí ( guárdelo, transfórmelo, úselo con una biblioteca de transcripción, lo que sea).

Los componentes disponibles para los micrófonos React están... sin mantenimiento. Generalmente lo dejaré así. No son necesariamente malos, pero algunos de los repositorios generan spam, algunos están llenos de enlaces rotos y la mayoría de los que pude encontrar no se han actualizado en más de unos pocos años.

Si quieres que se haga algo, tienes que hacerlo tú mismo.

¡Decidí hacer uno de estos componentes desde cero!

Aquí hay un enlace a la esencia de 125 líneas si solo desea usarlo y no tener que leer el resto de esta publicación de blog. Tan impaciente. Pero lo entiendo. La vida es un desafío.

De todos modos.

Hay un montón de cosas que generalmente debes tener en cuenta con los micrófonos. No profundicé en la compatibilidad del navegador con este (estoy seguro de que... Opera o algo así probablemente tendría problemas con esto), pero hay hay algunas características agradables e integradas del navegador moderno que llegar bastante lejos, aquí:

• navigator.mediaDevices: esto te permite acceder al micrófono del usuario (o cámara, si así lo deseas)
• getUserMedia: esto le permite obtener permiso de usuario para los dispositivos multimedia antes mencionados y produce un flujo multimedia.
• MediaRecorder: esto te permite grabar cosas

Todo esto combinado con algunas variables de estado de React para rastrear cada una de ellas, un useEffect para hacer cosas en el lado del navegador y luego una etiqueta

Es más fácil decirlo que hacerlo, por supuesto, por eso lo puse todo en una esencia que se puede copiar y pegar. Fuera de la funcionalidad básica, también hice una variable para un tiempo máximo de grabación (no la necesitas, pero si quieres transcribir algo o subir algo, creo que los límites son buenos), y algunos pequeños estilos de Tailwind para mostrar algunas animaciones alrededor del botón.

Usa el componente. Graba tus sueños.