前端音频录制工具：AudioRecorder 类实现与使用指南

在前端开发中，音频录制是一个常见的需求（如语音笔记、音频投稿、实时语音交互等）。这里我们深入剖析一个功能完善的 AudioRecorder 类，它基于浏览器的 MediaRecorder 和 AudioContext API 实现，具备麦克风权限处理、录制时长控制、暂停/恢复/停止/关闭、以及音频格式转换（WebM → WAV）等核心能力。

一、AudioRecorder 类核心特性

该类设计注重状态管理与资源释放，避免常见的内存泄漏问题。主要包含以下特性：

1. 基础录制能力：启动 / 暂停 / 恢复 / 停止 / 关闭录音，支持重复调用的异常处理；
2. 时长控制：自定义最大录制时长（默认 5 分钟），超时自动停止，实时返回 mm:ss 格式的录制时长；
3. 权限处理：优雅处理麦克风权限申请，拒绝时给出明确错误提示；
4. 资源管理：自动释放媒体流、音频上下文等资源，确保页面切换或销毁时不残留进程；
5. 格式转换：提供将录制的 WebM 格式音频转为 48kHz 16 位 PCM WAV 格式的接口（兼容性更强）；
6. 状态管理：内置录音状态（录制中 / 暂停 / 空闲），防止重复操作导致逻辑冲突；
7. 回调体系：提供开始、时长更新、停止、错误等回调，方便业务层灵活处理。

二、完整代码实现

下面是完整的类实现，重点展示了异步权限获取与状态流转的逻辑。

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; 
  }
}