Mehr als einmal musste ich in letzter Zeit eine Art React-Mikrofonkomponente erstellen, die Audio im Browser aufzeichnet, und dann machen Sie mit dem Audio-Blob, den Sie dort erhalten, was Sie wollen ( speichern, transformieren, mit einer Transkriptionsbibliothek verwenden, was auch immer).

Die verfügbaren Komponenten für React-Mikrofone werden… nicht gewartet. Generell belasse ich es dabei. Sie sind nicht unbedingt schlecht, aber einige der Repositories führen zu Spam, andere sind voller defekter Links und die meisten, die ich finden konnte, wurden seit mehr als ein paar Jahren nicht mehr aktualisiert.

Wenn Sie wollen, dass etwas erledigt wird, müssen Sie es selbst tun

Ich habe beschlossen, eine dieser Komponenten von Grund auf herzustellen!

Hier ist ein Link zum 125-zeiligen Kerninhalt, wenn Sie ihn nur verwenden möchten und nicht den Rest dieses Blogbeitrags lesen müssen. So ungeduldig. Aber ich verstehe. Das Leben ist eine Herausforderung.

Ohnehin.

Bei Mikrofonen gibt es im Allgemeinen eine Reihe von Dingen, die man berücksichtigen muss. Ich habe mich bei diesem Browser nicht eingehend mit der Browserkompatibilität befasst (ich bin mir sicher, dass … Opera oder so etwas wahrscheinlich Probleme damit haben würde), aber es gibt einige nette integrierte moderne Browserfunktionen, die das tun werden hier kommst du ziemlich weit:

navigator.mediaDevices: Damit können Sie auf das Mikrofon des Benutzers zugreifen (oder auf die Kamera, wenn Sie das möchten)
getUserMedia: Hiermit erhalten Sie Benutzerberechtigungen für die oben genannten Mediengeräte und erzeugen einen Medienstream.
MediaRecorder: Damit können Sie Dinge tatsächlich aufzeichnen