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