使用 React 创建录音机

当我们开发 Web 应用程序时，我们可以将浏览器视为瑞士军刀，其中包括一堆实用程序（API），其中之一是通过mediaDevices对象的 API获取媒体设备访问权限navigator，这允许开发人员创建与用户媒体设备相关的功能，这些功能可以创建语音笔记，就像 Whatsapp Web 所做的那样。

今天我们要创建一个应用程序，它可以录制用户的声音，然后将录制的声音保存在<audio>标签上，稍后播放，这个应用程序看起来像这样

Apart mediaDevicesAPI 我们需要

MediaRecordermediaDevices.getUserMedia()构造函数，通过方法从请求的媒体设备创建一个录音机对象。
Blob构造函数，该构造函数允许从实例获取的数据创建一个 blob 对象MediaRecorder。
URL.createObjectURL(blob)方法，这将创建一个 URL，该 URL 包含先前从实例创建的数据（语音）Blob，它将像一样使用<audio src=URL/。

如果你不明白，别担心，下面我会给你解释。首先，看一下<App/>组件。

<App/>使用一个自定义钩子，该钩子提供了 recorderState 和多个处理程序。如果您不知道如何使用自定义钩子，我分享了一篇关于此内容的文章。

记录器状态如下：

recordingMinutes并recordingSeconds用于显示录音时间并initRecording初始化录音机。
状态的其他部分，mediaStream将是提供的媒体设备mediaDevices.getUserMedia()，mediaRecorder将是的实例MediaRecorder，audio将是前面提到的 URL。

mediaStream由处理程序设置startRecording

设置后mediaStream，MediaRecorder实例被创建

然后audio设置

要获取语音并创建音频，mediaRecorder需要创建两个事件监听器。第一个ondataavailable监听onstop器获取语音块并将其推送到数组chunks；第二个监听器用于创建 blob，chunks然后创建音频。停止事件由处理程序或效果清理函数触发saveRecording，清理函数在录音取消时调用。