最近我不止一次不得不制作某种 React 麦克风组件来在浏览器中记录音频，然后你可以用你得到的音频块做任何你想做的事情（存储它，转换它，将它与转录库一起使用，等等）。

React 麦克风的可用组件……没有维护。我一般都会这样。它们不一定是坏的，但有些存储库会导致垃圾邮件，有些存储库充满了损坏的链接，而且我能找到的大多数存储库已经有几年没有更新了。

如果你想完成某件事，你必须自己做

我决定从头开始制作其中一个组件！

如果您只想使用它而不必阅读本博客文章的其余部分，这里有一个指向 125 行要点的链接。这么不耐烦。但我明白。生活充满挑战。

反正。

使用麦克风通常需要考虑很多事情。我没有深入研究浏览器与这个的兼容性（我确信……Opera 或其他东西可能会遇到麻烦），但是 有 一些不错的内置现代浏览器功能，可以让你走得更远，在这里：

• navigator.mediaDevices：这可以让您访问用户的麦克风（或摄像头，如果您需要的话）
• getUserMedia：这可以让您获得上述媒体设备的用户许可，并生成媒体流。
• MediaRecorder：这可以让你实际记录东西

所有这些都与一些用于跟踪它们的 React 状态变量、用于执行浏览器端操作的 useEffect 以及用于展示录制音频预览的本机

当然，说起来容易做起来难，所以这就是为什么我把这一切都放在可复制和粘贴的要点中。除了基本功能之外，我还为最大录制时间设置了一个变量（您不需要它，但如果您想转录某些内容或上传某些内容，我认为限制很好），以及一些小的 Tailwind 样式来显示一些内容按钮周围的动画。

使用该组件。记录你的梦想。