js实现录音
使用 Web Audio API 实现录音
Web Audio API 提供了音频处理能力，结合 MediaRecorder 可以实现录音功能。
// 获取音频流
navigator.mediaDevices.getUserMedia({ audio: true })
.then(stream => {
const mediaRecorder = new MediaRecorder(stream);
const audioChunks = [];
mediaRecorder.addEventListener('dataavailable', event => {
audioChunks.push(event.data);
});
mediaRecorder.addEventListener('stop', () => {
const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
const audioUrl = URL.createObjectURL(audioBlob);
const audio = new Audio(audioUrl);
audio.play(); // 播放录音
});
mediaRecorder.start();
setTimeout(() => mediaRecorder.stop(), 5000); // 5秒后停止
});使用第三方库 RecordRTC
RecordRTC 简化了录音流程，支持更多格式和功能。
const recordRTC = RecordRTC(stream, {
type: 'audio',
mimeType: 'audio/wav'
});
recordRTC.startRecording();
setTimeout(() => {
recordRTC.stopRecording(() => {
const blob = recordRTC.getBlob();
const audioUrl = URL.createObjectURL(blob);
document.getElementById('audio').src = audioUrl;
});
}, 5000);处理录音权限问题
确保在 HTTPS 环境或 localhost 下运行，避免权限错误。
navigator.mediaDevices.getUserMedia({ audio: true })
.catch(error => {
console.error('录音权限被拒绝:', error);
alert('请允许麦克风访问权限');
});保存录音文件
将录音保存为可下载文件。
function saveAudio(blob) {
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = 'recording.wav';
a.click();
}注意事项
- iOS 设备需要用户交互（如点击事件）才能触发录音
- 不同浏览器支持的音频格式可能不同
- 长时间录音需注意内存占用问题
