最近、ブラウザでオーディオを録音するある種の React マイク コンポーネントを作成する必要があったことが何度かあり、その後、そこで得られたオーディオ BLOB でやりたいことを何でも行うことができます (保存したり、変換したり、転写ライブラリで使用したり、何でも)。

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

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

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

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

ともかく。

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

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

これらすべてを、それぞれを追跡するためのいくつかの React 状態変数、ブラウザ側の処理を行うための useEffect、そして録音されたオーディオのプレビューを表示するためのネイティブ

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

コンポーネントを使用します。夢を記録してください。