単純な React マイク コンポーネントの作成

最近、ブラウザで音声を録音するある種の React マイク コンポーネントを作成する必要があったことが何度かあり、そこで得られた音声 BLOB を使って好きなことを行うことができます (保存したり、変換したり、文字起こしライブラリで使用したり、何でも可能です)。

世に出回っている React マイクのコンポーネントは…メンテナンスされていません。通常はそのままにしておきます。必ずしも悪いわけではありませんが、リポジトリの中にはスパムにつながるものもあれば、リンク切れが多く、私が見つけたリポジトリのほとんどは数年以上更新されていません。

何かをしてもらいたいなら、自分でやらなければなりません

これらのコンポーネントの 1 つを最初から作成することにしました!

このブログ投稿の残りを読む必要がなく、単に使用したい場合は、ここに 125 行の要点へのリンクがあります。とてもせっかちです。でも、わかります。人生は挑戦的です。

とにかく。

マイクに関しては、一般的に考慮しなければならないことがたくさんあります。これとブラウザの互換性については深く掘り下げませんでしたが (きっと… Opera か何かがこれに問題を抱えているでしょう)、 いくつかの優れた最新のブラウザ機能が組み込まれています。ここでかなり遠くまで行きます:

• navigator.mediaDevices: これにより、ユーザーのマイク (または必要に応じてカメラ) にアクセスできます
• getUserMedia: これにより、前述のメディア デバイスに対するユーザー許可を取得し、メディア ストリームを生成できます。
• MediaRecorder: これにより、実際に物事を録音できます

これらはすべて、それぞれを追跡するためのいくつかの React 状態変数、ブラウザ側の処理を行うための useEffect、そしてネイティブ

もちろん、言うは易く行うは難しなので、すべてをコピーアンドペーストできる要点にまとめました。基本機能以外に、最大録音時間の変数も作成しました (これは必要ありませんが、何かを転写したりアップロードしたりする場合は、制限を設けるのが適切だと思います)。また、いくつかの小さな Tailwind スタイルを表示するために作成しました。ボタンの周囲のアニメーション

コンポーネントを使用します。夢を記録します。

以上が単純な React マイク コンポーネントの作成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。