前端音频录制工具：AudioRecorder 类详解与使用指南
在前端开发中，音频录制是一个常见的需求（如语音笔记、音频投稿、实时语音交互等）。本文将详细介绍一个功能完善的 AudioRecorder 类，它支持麦克风权限处理、录制时长控制、暂停 / 恢复 / 停止 / 关闭、音频格式转换（WebM → 48kHz WAV）等核心能力，并提供完整的使用示例和功能解析。
一、AudioRecorder 类核心功能
该类基于浏览器的 MediaRecorder 和 AudioContext API 实现，具备以下核心特性：
- 基础录制能力：启动 / 暂停 / 恢复 / 停止 / 关闭录音，支持重复调用的异常处理；
- 时长控制：自定义最大录制时长（默认 5 分钟），超时自动停止，实时返回
mm:ss格式的录制时长； - 权限处理：优雅处理麦克风权限申请，拒绝时给出明确错误提示；
- 资源管理：自动释放媒体流、音频上下文等资源，避免内存泄漏；
- 格式转换：将录制的 WebM 格式音频转为 48kHz 16 位 PCM WAV 格式（兼容性更强）；
- 状态管理：内置录音状态（录制中 / 暂停 / 空闲），避免重复操作；
- 回调体系：提供开始、时长更新、停止、错误等回调，方便业务层处理。
二、完整代码实现
javascript
运行
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.onStart || (() => {}), // 开始回调 onStop: options.onStop || (() => {}), // 停止回调 onError: options.onError || ((err) => console.error('录音错误:', err)) // 错误回调 }; // 录音核心状态 this.state = { isRecording: false, // 是否正在录音 isPaused: false, // 是否暂停 recordDuration: 0, // 已录制时长（秒） recordTimer: null, // 时间计时定时器 mediaStream: null, // 媒体流 audioCtx: null, // 音频上下文 recorder: null, // 媒体录制器 audioChunks: [], // 音频数据片段 isAcquiringPermission: false, // 标记是否正在获取麦克风权限 permissionPromise: null // 存储获取权限的Promise，用于中断 }; } /** * 1. 开始录音（支持实时返回 mm:ss 格式时间） * @returns {Promise<void>} */ async start() { try { // 避免重复启动 if (this.state.isRecording && !this.state.isPaused) { this.config.onError('当前已在录音中，无需重复启动'); return; } // 情况1：从暂停状态恢复录音 if (this.state.isPaused) { this._resumeRecording(); return; } // 情况2：全新启动录音 → 标记异步状态 this.state.isAcquiringPermission = true; // 开始获取权限 this.state.permissionPromise = navigator.mediaDevices.getUserMedia({ audio: { sampleRate: { ideal: 48000 }, channelCount: { ideal: 1 }, echoCancellation: { ideal: true }, noiseSuppression: { ideal: true } } }); // 等待权限获取结果 this.state.mediaStream = await this.state.permissionPromise; // 关键：如果在权限获取期间已调用close，直接终止后续逻辑 if (!this.state.isAcquiringPermission) { this._cleanupMediaStream(); // 释放已获取的流（若有） return; } // 权限获取成功 → 清除异步标记 this.state.isAcquiringPermission = false; this.state.permissionPromise = null; // 创
