在前端开发中,音频录制是一个常见的需求(如语音笔记、音频投稿、实时语音交互等)。这里我们深入剖析一个功能完善的 AudioRecorder 类,它基于浏览器的 MediaRecorder 和 AudioContext API 实现,具备麦克风权限处理、录制时长控制、暂停/恢复/停止/关闭、以及音频格式转换(WebM → WAV)等核心能力。
一、AudioRecorder 类核心特性
该类设计注重状态管理与资源释放,避免常见的内存泄漏问题。主要包含以下特性:
- 基础录制能力:启动 / 暂停 / 恢复 / 停止 / 关闭录音,支持重复调用的异常处理;
- 时长控制:自定义最大录制时长(默认 5 分钟),超时自动停止,实时返回
mm:ss格式的录制时长; - 权限处理:优雅处理麦克风权限申请,拒绝时给出明确错误提示;
- 资源管理:自动释放媒体流、音频上下文等资源,确保页面切换或销毁时不残留进程;
- 格式转换:提供将录制的 WebM 格式音频转为 48kHz 16 位 PCM WAV 格式的接口(兼容性更强);
- 状态管理:内置录音状态(录制中 / 暂停 / 空闲),防止重复操作导致逻辑冲突;
- 回调体系:提供开始、时长更新、停止、错误等回调,方便业务层灵活处理。
二、完整代码实现
下面是完整的类实现,重点展示了异步权限获取与状态流转的逻辑。
class AudioRecorder {
/**
* 构造函数
* @param {Object} options 配置项
* @param {number} options.maxDuration 最大录制时长(秒,默认 300 秒=5 分钟)
* @param {Function} options.onTimeUpdate 录制时间更新回调(参数:格式化为 mm:ss 的时间字符串)
* @param {Function} options.onStart 录音开始回调
* @param {Function} options.onStop 录音停止回调(参数:最终音频 Blob 对象)
* @param {Function} options.onError 错误回调(参数:错误信息)
*/
constructor(options = {}) {
// 配置项默认值
this.config = {
maxDuration: options.maxDuration || 300,
onTimeUpdate: options.onTimeUpdate || (() => {}),
onStart: options. || ( {}),
: options. || ( {}),
: options. || ( .(, err))
};
. = {
: ,
: ,
: ,
: ,
: ,
: ,
: ,
: [],
: ,
:
};
}
() {
{
(.. && !..) {
..();
;
}
(..) {
.();
;
}
.. = ;
.. = navigator..({
: {
: { : },
: { : },
: { : },
: { : }
}
});
.. = ..;
(!..) {
.();
;
}
.. = ;
.. = ;
.. = (..);
.. = [];
... = {
(e.. > ) {
...(e.);
}
};
... = {
blob = (.., { : });
..(blob);
.();
};
... = {
..(e.);
.();
};
...();
.. = ;
.. = ;
.. = ;
.();
..();
} (err) {
..(err.);
err;
}
}
() {
(.. && ..) {
...();
.. = ;
.. = ;
.();
}
}
() {
(..);
.. = ( {
(!..) {
..++;
minutes = .(.. / ).().(, );
seconds = (.. % ).().(, );
..();
(.. >= ..) {
.();
}
}
}, );
}
() {
(.. && !..) {
...();
.. = ;
.. = ;
(..);
}
}
() {
(.. || ..) {
(.. && ... !== ) {
...();
}
(..);
.. = ;
.. = ;
}
}
() {
.();
.();
.. = ;
}
() {
(..) {
...().( track.());
.. = ;
}
(..) {
.. = ;
}
}
() {
.. = ;
.. = ;
.. = ;
(..);
}
() {
.(, blob.);
blob;
}
}

