在前端开发中，音频录制功能是十分常见的需求。而 npm 包 recorder-js 则是一个方便的工具，它提供了录制音频、播放音频、上传音频等功能。本文将详细介绍如何使用 recorder-js 完成音频录制功能。
安装 recorder-js
首先，需要通过 npm 安装 recorder-js：
npm install recorder-js
示例代码
下面我们来看一下如何使用 recorder-js 来实现录制音频的功能。需要注意的是，使用 recorder-js 需要在支持 MediaRecorder API 的浏览器上才能正常运行。
-- -------------------- ---- -------
------
------
------------------ ---------------
-------
------
--------------- ------------
------- ------------------- ------------------
------- ----------------- ------------------
------- ----------------- ------------------
------ -------------------
------- ------------------------
-------
--------- -------------------- ---- -------
------ -------- ---- --------------
-- -- ---- --
----- -------- - ------------------------------------
----- ------- - -----------------------------------
----- ------- - -----------------------------------
----- ----- - ---------------------------------
--- -------- - ----- -- -- -------- --
-- -------------
---------------------------------- -- -- -
-- ---- -------- --
-------- - --- ----------
----------- -----
---
-- ----
------------------------ -- -
---------------------- ----------
---
---
-- -------------
--------------------------------- -- -- -
-- ----
---------------------------- -------- -- -
---------------------- ----------
-- ------------
--------- - --------------------------
---
---
-- -------------
--------------------------------- -- -- -
-- -------
-------------
---使用教程
创建 recorder 对象
在使用 recorder-js 之前，需要先创建一个 recorder 对象，以便后续操作。创建 recorder 对象时，需要指定采样率（sampleRate）等参数，如下所示：
const recorder = new Recorder({
sampleRate: 44100,
// 其他参数
});开始录制
创建 recorder 对象后，即可开始录制音频。在开始录音前，需要使用 start() 方法对 recorder 对象进行初始化，如下所示：
recorder.start().then(() => {
console.log('Recording started');
});停止录制
在开始录音后，可以使用 stop() 方法停止录音。停止录音时，会返回录制的音频数据，包括音频数据的 blob 对象和 buffer 对象，如下所示：
recorder.stop().then(({blob, buffer}) => {
console.log('Recording stopped');
console.log('Blob:', blob);
console.log('Buffer:', buffer);
});播放录音
在停止录音后，即可将录制的音频输出到页面上进行播放，如下所示：
audio.src = URL.createObjectURL(blob); audio.play();
总结
使用 recorder-js 能够方便地实现音频录制、播放、上传等功能。在使用 recorder-js 时，需要注意浏览器是否支持 MediaRecorder API。本文详细介绍了 recorder-js 的使用方法，并提供了示例代码以供参考，理解 recorder-js 的使用方法有助于在项目开发中快速完成录音功能的集成。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/recorder-js