制作一个简单的 React 麦克风组件

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

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

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

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

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

无论如何。

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

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

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

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

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

以上是制作一个简单的 React 麦克风组件的详细内容。更多信息请关注PHP中文网其他相关文章！