前言
在现代 Web 应用中，音频录制和播放已经成为了必不可少的功能之一。为了方便实现这些功能，社区中已经出现了许多优秀的音频相关的 npm 包。其中，au-audio-recorder 就是一个非常优秀的录音 npm 包。本文将详细介绍如何使用 au-audio-recorder 实现录音功能。
安装 au-audio-recorder
在开始使用之前，我们需要先安装 au-audio-recorder npm 包。在终端中运行以下命令：
--- ------- ----------------- ------
如果你使用的是 yarn，则可以运行以下命令来安装：
---- --- -----------------
使用 au-audio-recorder
安装完成之后，我们就可以直接在代码中引入并使用 au-audio-recorder 了。下面是一个最简单的使用示例：
------ -------- ---- -------------------- ----- -------- - --- ----------- -- ---- ----------------------- -- ----------- ---- ------------------------------- -- - -- ------------------ ---
上述示例中，我们创建了一个 Recorder 实例，并调用了它的 startRecord 方法开始录音。录音完成后，调用 stopRecord 方法可以获取到录音文件的 blob 对象。
除了上述最简单的使用方式之外，au-audio-recorder 还提供了许多其他的 API 和事件。下面将逐一介绍这些 API 和事件。
Recorder 构造函数
Recorder 构造函数最常用的参数是一个 options 对象。options 对象可以用于指定录音参数，比如录音格式、采样率等。下面是一个使用 options 对象的示例：
------ -------- ---- -------------------- ----- -------- - --- ---------- ----- ------ ----------- ------ ----------- ----- ---
其中，type 参数指定录音格式，默认为 wav；sampleRate 参数指定采样率，默认为 44100；bufferSize 参数指定录音缓冲区大小，默认为 4096。
startRecord 方法
Recorder 实例的 startRecord 方法用于开始录音。这个方法不接受任何参数。调用这个方法后，Recorder 实例将开始录音。下面是一个使用 startRecord 方法的示例：
------ -------- ---- -------------------- ----- -------- - --- ----------- -- ---- -----------------------
stopRecord 方法
Recorder 实例的 stopRecord 方法用于停止录音，并获取录音文件的 blob 对象。这个方法返回一个 Promise，在 Promise 中会传递录音文件的 blob 对象。下面是一个使用 stopRecord 方法的示例：
------ -------- ---- -------------------- ----- -------- - --- ----------- -- ---- ----------------------- -- ----------- ---- ------------------------------- -- - -- ------------------ ---
clear 方法
Recorder 实例的 clear 方法用于清空录音缓冲区。这个方法不接受任何参数。下面是一个使用 clear 方法的示例：
------ -------- ---- -------------------- ----- -------- - --- ----------- -- ------- -----------------
setVolume 方法
Recorder 实例的 setVolume 方法用于设置录音的音量。这个方法接受一个参数，表示音量大小。下面是一个使用 setVolume 方法的示例：
------ -------- ---- -------------------- ----- -------- - --- ----------- -- ----- --- -----------------------
on 方法
Recorder 实例的 on 方法用于绑定事件处理函数。这个方法接受两个参数：事件名称和事件处理函数。下面是一个使用 on 方法的示例：
------ -------- ---- -------------------- ----- -------- - --- ----------- -- -------- ----------------------- ---- -- - -- ------------------ ---
可用的事件列表
| 事件名称 | 事件描述 |
|---|---|
| start | 开始录音时触发 |
| stop | 录音结束时触发 |
| recorded | 获取录音文件成功时触发 |
| error | 出现错误时触发 |
| volume | 音量大小变化时触发 |
| silence | 检测到静默时触发 |
| vibrated | 震动响声录入时触发 |
| nonvibrated | 非震动响声录入时触发 |
案例展示
下面是一个完整的使用示例，这个示例演示了如何使用 au-audio-recorder 实现录音、播放和上传录音文件的功能：
------ -------- ---- --------------------
----- -------- - --- -----------
-- ----
-----------------------
-- ----- - --
------------- -- -
-- ----------- ----
------------------------------- -- -
-- ----------- ----- --
----- ----- - --------------------------------
--------- - --------------------------
-------------- - -----
---------------------------------
-- ------------- ---- --
----- ---- - -------------------------------
----------- - -------
----------- - ----------
------------ - ----------------------
-------------------- - -------
-- ------------- ----- --
----- --------- - --------------------------------
-------------- - -------
-------------- - --------
--------------------------- - -------
-- --------
----- ------------ - ---------------------------------
----------------- - ---------
------------------------ - -----
----------------------------
-------------------------------
--------------------------------
-- ------
------------------------------- - -- -
-------------------
----- -------- - --- -----------
------------------------ ------
---------------- -
------- -------
----- ---------
--
-------------- -- ----------------
---------- -- -
------------------
---
---
---
-- ------
上述示例中，我们创建了一个 Recorder 实例，并调用了它的 startRecord 方法开始录音。录音完成后，我们使用 stopRecord 方法获取到录音文件的 blob 对象。我们将录音文件保存到了一个 audio 元素中，以便播放录音。我们还创建了一个 form 元素，用于上传录音文件。我们监听这个 form 元素的 submit 事件，将录音文件通过 fetch API 上传到服务器。
结语
通过本文的介绍，我们了解了如何使用 npm 包 au-audio-recorder 实现录音的功能。当然，本文介绍的只是 au-audio-recorder 的一部分功能，这个包还有很多其他的功能，比如支持对录音文件进行剪辑、支持对录音进行压缩等。如果你有兴趣了解这些功能，请查看 au-audio-recorder 的文档。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055ca481e8991b448da091