在前端开发中，音频录制是一个难点。如果你需要实现一款在线语音识别的应用或者实现在线会议的语音通话，那么录制语音成为了一个必备的技术。npm 包 hsrecorder 是一个轻量级的录音工具，可以用于前端网页开发中，实现录制音频的功能。
安装 hsrecorder
要使用 hsrecorder，首先要在命令行工具中输入以下命令，安装 hsrecorder 包：
npm install hsrecorder
获取音频流并录制
hsrecorder 使用 Web Audio API 记录音频片段，最终将他们合并成完整的音频流。要开始录制操作，需要首先获取使用 Web Audio API 创建的 MediaStream 对象。你可以通过 navigator.getUserMedia() 方法获取用户的音频输入流，也可以使用 navigator.mediaDevices.getUserMedia() 方法获取权限。
-- -------------------- ---- -------
----------------------
--------------------- ------
---------------------- -
--- ------------- - --- -------------------
-----------------------
-- ---- - --
--------------------- -
---------------------
-- ------
--
-------------------- -
---------------------- - -----
---以上代码中，首先通过 navigator.mediaDevices.getUserMedia() 方法获取了用户的音频输入流，将其作为 hsrecorder 的构造函数参数，创建了一个 hsrecorder 对象。接下来通过 mediaRecorder.record() 方法开始录制音频，最后通过 mediaRecorder.stop() 方法结束录制。在本例中，我们将录制音频的时间设置为 5 秒钟。
导出录制音频文件
hsrecorder 可以通过 exportWAV() 或者 exportMonoWAV() 方法将录制的音频文件导出成 WAV 格式，你可以选择导出单声道或者立体声文件。
-- -------------------- ---- -------
----------------------------- - -------------- -
--- --- - --------------------------
--- ----- - --- -----------
-------------
-- ---------
--- -------- - --- -----------------------
--------------------------------- -
-- ---- -----------
------------------
---
--以上例子中，mediaRecorder.ondataavailable 函数会在有音频数据时自动调用。在这个函数中，我们可以将录制的音频数据通过 URL.createObjectURL() 方法创建 URL，并用 <audio> 元素播放录制的音频。此外，这个函数中我们也可以调用 exportWAV() 方法，将录制的音频文件导出成 WAV 格式。
总结
hsrecorder 包提供了一个简单的录音接口，能够帮助前端开发者实现录制音频的功能。通过上面的教程，我们了解了如何安装 hsrecorder，以及如何使用它来录制音频，最后将录制的音频文件导出。希望这个教程能够对大家有所帮助，也希望大家在使用 hsrecorder 时尽量多进行实践，在实践中发现问题，修改问题，提升自己的技术水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005526181e8991b448cfe62