npm 包 record-audio-js 使用教程
record-audio-js 是一款前端录音的 npm 包,它使用 Web API 的 MediaRecorder 接口,支持录制并保存 WebRTC 流、音频文件等功能。本教程将详细介绍如何使用该包并提供简单的示例代码供参考。
准备工作
在使用 record-audio-js 之前,你需要先安装 Node.js 和 npm,这里不再赘述安装步骤。安装完成后,在终端或命令行中使用以下命令安装 record-audio-js:
npm install record-audio-js
录制一个 WebRTC 流
首先我们需要创建一个 MediaStream 对象,该对象可以从获取到的媒体设备中获取到。下面的代码将请求用户的麦克风,获取到 MediaStream 对象并创建 MediaRecorder 对象:
-- -------------------- ---- ------- ----- ----------- - - ------ ---- -- -- ----- ------------------------------------------------ -------------- -- - ----- ------------- - --- ---------------------- -- -- ------------- ---------------------- -- ---- -- --- -------------- -- - ------------------- ---
当 MediaRecorder 对象开始 recording 状态时,它将录制输入的音频流。使用 stop() 方法将停止录制。以下是一个完整的示例代码:
-- -------------------- ---- ------- ----- ----------- - - ------ ---- -- ------------------------------------------------ -------------- -- - ----- ------------- - --- ---------------------- ---------------------- ----- ----------- - --- ----------------------------------------------- ------- -- - ----------------------------- --- -------------------------------------- -- -- - ----- --------- - --- ------------------ ----- -------- - ------------------------------- ----- ------------ - ---------------------------- ----------------- - --------- --------------------- - --------- ---------------------- - --------- ------- ---------------------------------------- --- ------------- -- - --------------------- -- ------ -------------- -- - ------------------- ---
上述代码将录制麦克风输入的音频流 5 秒钟,并将录制的音频文件保存为名为 record 的文件,此处使用了 Blob 和 URL.createObjectURL() API 来保存录制的数据。
录制音频文件
MediaRecorder 还可用于录制一段音频文件并将其保存到本地。以下是一个保存 MP3 文件的示例代码:
const recorder = new RecordAudio(); // 初始化 // 开始录制 recorder.start((audio) => { // 处理录制的音频数据 saveAs(audio.src, 'record.mp3'); // 使用 file-saver 库保存文件 recorder.destroy(); // 销毁实例 });
以上代码将创建一个 RecordAudio 实例,并在 start() 方法中传入一个回调函数,该回调将在录制完成后调用,并将录制的音频文件作为参数传递给它。这里需要注意,该回调函数只会在 stop() 方法调用之后才会被触发。
总结
record-audio-js 是一款非常方便的 npm 包,它提供了一组简单易用的 API 以方便地录制音频。在本教程中,我们了解了如何使用这个包来录制 WebRTC 流和音频文件,并提供了示例代码供参考。在实际应用中,你可以根据需要进行扩展和优化。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60056b3e81e8991b448e543e