HTML5 getUserMedia与Web Audio API实现网页录音完整指南

脚本专家

本文详细介绍如何利用HTML5的getUserMedia API和Web Audio API在浏览器中实现网页录音功能。涵盖从麦克风权限获取、音频流处理、实时录音控制到数据编码保存的完整流程，并提供可直接运行的代码示例。

---

1. 获取用户媒体设备：getUserMedia基础

getUserMedia允许网页通过JavaScript直接访问用户的摄像头或麦克风。调用navigator.mediaDevices.getUserMedia()方法，传入包含audio和video属性的约束对象，返回一个Promise对象，成功时携带MediaStream对象。

2. navigator.mediaDevices.getUserMedia({ audio: true, video: false })
3. .then(function(stream) {
4. // stream 即来自麦克风的音频流
5. })
6. .catch(function(err) {
7. console.error(err.name, err.message);
8. });

复制代码

注意：该API必须在HTTPS或localhost下使用，否则会抛出SecurityError。

2. 错误处理与浏览器兼容性检查

常见的错误类型包括：
- NotAllowedError：用户拒绝授权
- NotFoundError：未找到麦克风设备
- NotReadableError：设备被占用或不可读
- OverconstrainedError：约束参数无法满足
- AbortError：用户中途取消
- SecurityError：非安全上下文
- TypeError：参数格式错误

推荐使用switch语句按错误名提示用户：

2. navigator.mediaDevices.getUserMedia({ audio: true })
3. .catch(function(error) {
4. switch(error.name) {
5. case 'NotAllowedError':
6. alert('请允许麦克风访问权限');
7. break;
8. case 'NotFoundError':
9. alert('未检测到麦克风设备');
10. break;
11. default:
12. alert('设备访问失败: ' + error.message);
13. }
14. });

复制代码

调用getUserMedia前建议先进行特性检测：

2. function supportsGetUserMedia() {
3. return !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia);
4. }
5. if (!supportsGetUserMedia()) {
6. alert('当前浏览器不支持getUserMedia API');
7. return;
8. }

复制代码

3. 使用Web Audio API处理音频流

获取的MediaStream可以通过Web Audio API进行实时处理。首先创建AudioContext，然后通过createMediaStreamSource()将流转换为音频源节点：

2. const audioContext = new AudioContext();
3. const source = audioContext.createMediaStreamSource(stream);
4. // 可直接连接到扬声器输出
5. source.connect(audioContext.destination);

复制代码

若要实现录音，需要创建MediaStreamAudioDestinationNode作为音频录制目的地：

2. const dest = audioContext.createMediaStreamDestination();
3. source.connect(dest);
4. // dest.stream 包含了经过处理的音频流

复制代码

使用AnalyserNode可以实现音频可视化：

2. const analyser = audioContext.createAnalyser();
3. analyser.fftSize = 2048;
4. source.connect(analyser);
5. const bufferLength = analyser.frequencyBinCount;
6. const dataArray = new Uint8Array(bufferLength);
7. function draw() {
8. requestAnimationFrame(draw);
9. analyser.getByteFrequencyData(dataArray);
10. // 可将dataArray绘制到canvas上
11. }
12. draw();

复制代码

4. 设计AudioRecorder类控制录音流程

封装一个AudioRecorder类，管理录音开始、暂停、恢复、停止及数据获取：

2. class AudioRecorder {
3. constructor(stream) {
4. this.stream = stream;
5. this.audioContext = new AudioContext();
6. this.source = this.audioContext.createMediaStreamSource(stream);
7. this.dest = this.audioContext.createMediaStreamDestination();
8. this.source.connect(this.dest);
9. this.mediaRecorder = new MediaRecorder(this.dest.stream);
10. this.chunks = [];
11. this.recording = false;
12. this.paused = false;
13. this.mediaRecorder.ondataavailable = (e) => {
14. if (e.data.size > 0) this.chunks.push(e.data);
15. };
16. }
17. start() {
18. if (this.recording) return;
19. this.chunks = [];
20. this.mediaRecorder.start();
21. this.recording = true;
22. }
23. pause() {
24. if (!this.recording || this.paused) return;
25. this.mediaRecorder.pause();
26. this.paused = true;
27. }
28. resume() {
29. if (!this.paused) return;
30. this.mediaRecorder.resume();
31. this.paused = false;
32. }
33. stop() {
34. return new Promise((resolve) => {
35. this.mediaRecorder.onstop = () => {
36. const blob = new Blob(this.chunks, { type: 'audio/webm' });
37. resolve(blob);
38. };
39. this.mediaRecorder.stop();
40. this.recording = false;
41. });
42. }
43. }

复制代码

使用示例：

2. const recorder = new AudioRecorder(stream);
3. recorder.start();
4. setTimeout(async () => {
5. const blob = await recorder.stop();
6. // blob即为录音文件
7. }, 5000);

复制代码

5. 录音文件编码与保存

MediaRecorder默认输出格式为浏览器支持的编码（如webm）。若需保存为MP3，可使用第三方编码器（如lamejs），但更简单的方式是直接使用MediaRecorder的mimeType参数：

2. const recorder = new MediaRecorder(stream, { mimeType: 'audio/webm;codecs=opus' });

复制代码

保存到本地时，利用URL.createObjectURL创建下载链接：

2. const blob = new Blob(chunks, { type: 'audio/webm' });
3. const url = URL.createObjectURL(blob);
4. const a = document.createElement('a');
5. a.href = url;
6. a.download = 'recording.webm';
7. a.click();
8. URL.revokeObjectURL(url);

复制代码

如需上传云端，可使用fetch发送FormData：

2. async function uploadAudio(blob, uploadUrl) {
3. const formData = new FormData();
4. formData.append('file', blob, 'audio.webm');
5. const response = await fetch(uploadUrl, {
6. method: 'POST',
7. body: formData
8. });
9. const result = await response.json();
10. return result.link;
11. }

复制代码

6. 安全限制与最佳实践

- 始终在HTTPS环境下使用getUserMedia。
- 录音前请求用户授权，并在UI中给出明确提示。
- 停止录音后及时释放MediaStream，调用stream.getTracks().forEach(track => track.stop())。
- 注意移动端浏览器可能要求用户手势触发（如点击按钮）。
- 对于长时间录音，定期清理内存中的chunks，或采用分段保存。

综上所述，通过组合getUserMedia、Web Audio API和MediaRecorder，可以在纯前端实现功能完整的网页录音功能。配合适当的错误处理与性能优化，该方案可应用于在线教育、会议录音、语音笔记等场景。

热心网友4

楼主写得很全面，尤其是错误处理部分和浏览器兼容性检测的细节很实用。我补充一点：在实际项目中，如果录制时间较长，`chunks`数组可能会占用较大内存，可以考虑在`ondataavailable`事件触发时直接上传或分段处理，而不是全部存起来。另外，获取最终音频文件时，可以用`new Blob(this.chunks, { type: 'audio/webm; codecs=opus' })`来指定编码格式，这样兼容性更好。想问一下楼主，对于移动端浏览器（比如iOS Safari），是否有遇到过音频录制异常的情况？比如首次点击录音需要触发用户手势才能创建`AudioContext`的常见坑。