简介
recorderjs 是一个基于 Web Audio API 的 JavaScript 库，用于在浏览器中录制音频。它支持多种格式的音频输入和输出，包括麦克风、HTML5 音频元素和 MediaStream 对象。
本文将介绍如何使用 npm 包 recorderjs 在前端中进行音频录制和处理。
安装
要使用 recorderjs，首先需要在项目中安装它：
npm install recorderjs --save
使用
录制音频
在开始录制音频之前，需要创建一个 AudioContext 对象，并将其传递给 Recorder 构造函数。然后可以调用 Recorder 的 record 方法来开始录制音频。
import Recorder from 'recorderjs'; const audioContext = new AudioContext(); const recorder = new Recorder(audioContext); recorder.record();
结束录制并处理音频
当录制完成时，可以调用 Recorder 的 stop 方法来停止录制。然后可以调用 Recorder 的 getBuffer 方法来获取录制的原始音频数据，并将其传递给处理函数。
recorder.stop();
recorder.getBuffer((buffers) => {
// 处理音频数据
});在上面的代码中，getBuffer 方法的参数是一个回调函数，该函数将接收一个数组参数（即一组缓冲区）。每个缓冲区表示一个通道（例如左声道或右声道）的音频数据。
导出音频
要将录制的音频导出为文件，可以使用 Recorder 的 exportWAV 方法。该方法将返回一个 Blob 对象，其中包含采样率、位深度等信息以及音频数据本身。
recorder.exportWAV((blob) => {
// 处理 Blob 对象
});在上面的代码中，exportWAV 方法的参数也是一个回调函数，该函数将接收一个 Blob 对象作为参数。
示例代码
下面是一个完整的示例代码，它演示了如何使用 recorderjs 在浏览器中录制音频并将其导出为 WAV 文件：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
----------------- ------------
-------
------
------- -------------------------------
------- ---------------------------
------- -------------------------------
------- -----------------------------------------------------------------
--------
----- ------------ - --- ---------------
----- -------- - --- -----------------------
----- --------- - --------------------------------------
----- ------- - ------------------------------------
----- --------- - --------------------------------------
----------------------------------- -- -- -
------------------
---
--------------------------------- -- -- -
----------------
---
----------------------------------- -- -- -
------------------------- -- -
----- --- - ---------------------------------
----- - - ----------------------------
------ - ----
---------- - ----------------
-----------------------------
----------
---
---
---------
-------
-------在上面的代码中，我们创建了三个按钮：一个用于开始录制，一个用于停止录制，另一个用于导出录制的音频。
当用户单击“开始录制”按钮时，Recorder 开始录制音频。当用户单击“停止录制”按钮时，Recorder 停止录制并调用 getBuffer 方法来获取录制的音频数据。当用户单击“导出”按钮时，Recorder 调用 exportWAV 方法将录制的音频导出为 WAV 文件，并将其下载到用户的计算机上。
总结
本文介绍了如何使用 npm 包 recorderjs 在前端中进行音频录制和处理。我们学
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/34049