Erstellen einer einfachen React-Mikrofonkomponente

In letzter Zeit musste ich mehr als einmal eine Art React-Mikrofonkomponente erstellen, die Audio im Browser aufzeichnet, und dann macht man mit dem Audio-Blob, den man dort bekommt, was man will ( Speichern Sie es, transformieren Sie es, verwenden Sie es mit einer Transkriptionsbibliothek, 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 neu 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.

Wie auch immer.

Bei Mikrofonen gibt es im Allgemeinen eine Reihe von Dingen, die Sie berücksichtigen müssen. 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: Damit erhalten Sie Benutzerberechtigungen für die oben genannten Mediengeräte und erzeugen einen Medienstream.
• MediaRecorder: Damit können Sie Dinge tatsächlich aufzeichnen

All dies kombiniert mit einigen React-Statusvariablen zum Verfolgen jeder einzelnen davon, einem useEffect für browserseitige Aufgaben und dann einem nativen

Das ist natürlich alles leichter gesagt als getan, deshalb habe ich alles in einem kopier- und einfügbaren Kern zusammengefasst. Außerhalb der Grundfunktionalität habe ich auch eine Variable für eine maximale Aufnahmezeit erstellt (Sie brauchen sie nicht, aber wenn Sie etwas transkribieren oder hochladen möchten, sind Grenzen meiner Meinung nach gut) und einige kleine Tailwind-Stile, um einiges zu zeigen Animationen rund um die Schaltfläche.

Verwenden Sie die Komponente. Zeichnen Sie Ihre Träume auf.

Das obige ist der detaillierte Inhalt vonErstellen einer einfachen React-Mikrofonkomponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!