npm 包 record-audio-js 使用教程

阅读时长 4 分钟读完

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

纠错
反馈