当前位置：首页 > JavaScript

js 实现录音

2026-02-02 03:16:37JavaScript

实现录音的基本步骤

使用JavaScript实现录音功能主要依赖MediaRecorder API。以下是实现录音的基本流程：

获取用户麦克风权限 通过navigator.mediaDevices.getUserMedia请求麦克风访问权限。该方法返回一个Promise，解析后得到一个MediaStream对象。

navigator.mediaDevices.getUserMedia({ audio: true })
  .then(stream => {
    // 处理音频流
  })
  .catch(err => {
    console.error('无法访问麦克风:', err);
  });

创建MediaRecorder实例 使用获取到的MediaStream创建MediaRecorder对象。可以指定音频格式，如audio/webm或audio/mp3。

const mediaRecorder = new MediaRecorder(stream, {
  mimeType: 'audio/webm'
});

处理录音数据 监听dataavailable事件收集录音数据块。这些数据块可以存储在数组中，最终合并为完整的录音文件。

let audioChunks = [];
mediaRecorder.addEventListener('dataavailable', event => {
  audioChunks.push(event.data);
});

控制录音过程 调用start()方法开始录音，stop()方法停止录音。可以设置时间切片参数（毫秒）定期获取数据。

mediaRecorder.start(1000); // 每1秒收集一次数据
// 停止录音
setTimeout(() => {
  mediaRecorder.stop();
}, 5000); // 5秒后停止

生成音频文件 录音停止后，将收集的数据块合并为Blob对象，并创建URL供下载或播放。

mediaRecorder.addEventListener('stop', () => {
  const audioBlob = new Blob(audioChunks, { type: 'audio/webm' });
  const audioUrl = URL.createObjectURL(audioBlob);
  const audioElement = new Audio(audioUrl);
  audioElement.play(); // 播放录音
  // 或创建下载链接
  const downloadLink = document.createElement('a');
  downloadLink.href = audioUrl;
  downloadLink.download = 'recording.webm';
  document.body.appendChild(downloadLink);
  downloadLink.click();
});

兼容性与注意事项

浏览器兼容性 MediaRecorder API在现代浏览器中得到较好支持（Chrome、Firefox、Edge），但Safari和旧版IE不支持。需检测API是否存在：

if (!navigator.mediaDevices || !window.MediaRecorder) {
  alert('您的浏览器不支持录音功能');
}

音频格式限制 不同浏览器支持的音频格式可能不同。建议优先使用audio/webm，或通过库（如opus-media-recorder）扩展格式支持。

用户交互要求 大多数浏览器要求录音操作必须由用户手势（如点击按钮）触发，否则会抛出安全错误。

recordButton.addEventListener('click', () => {
  // 在此处调用getUserMedia
});

高级功能扩展

实时音频处理 通过AudioContext API可以对录音流进行实时处理（如降噪、可视化）：

const audioContext = new AudioContext();
const sourceNode = audioContext.createMediaStreamSource(stream);
// 连接分析器或处理节点
const analyser = audioContext.createAnalyser();
sourceNode.connect(analyser);

第三方库推荐

RecordRTC: 提供更丰富的功能（如WAV格式录制、屏幕录制）
Mic.js: 简化的录音接口
opus-media-recorder: 支持Opus编码

// 使用RecordRTC示例
const recorder = new RecordRTC(stream, {
  type: 'audio',
  mimeType: 'audio/wav'
});
recorder.startRecording();

错误处理与优化

错误类型处理

权限拒绝：捕获NotAllowedError
设备不可用：捕获NotFoundError
其他错误：使用通用错误处理

navigator.mediaDevices.getUserMedia({ audio: true })
  .catch(err => {
    if (err.name === 'NotAllowedError') {
      alert('请允许麦克风访问');
    }
    // 其他错误处理
  });

性能优化

js 实现录音

释放资源：停止后关闭音频流
内存管理：及时撤销对象URL

mediaRecorder.addEventListener('stop', () => {
  stream.getTracks().forEach(track => track.stop());
  // 使用完后撤销URL
  URL.revokeObjectURL(audioUrl);
});

以上方法提供了从基础到进阶的JavaScript录音实现方案，可根据具体需求调整功能模块。

标签: js