js实现录音

使用Web Audio API实现录音

Web Audio API提供了一套完整的音频处理系统，可以用于录音功能。以下是实现录音的基本步骤：

navigator.mediaDevices.getUserMedia({ audio: true }) .then(function(stream) { const audioContext = new AudioContext(); const mediaStreamSource = audioContext.createMediaStreamSource(stream); const scriptProcessor = audioContext.createScriptProcessor(4096, 1, 1);

let audioChunks = [];
scriptProcessor.onaudioprocess = function(e) {
    audioChunks.push(e.inputBuffer.getChannelData(0));
};

mediaStreamSource.connect(scriptProcessor);
scriptProcessor.connect(audioContext.destination);

}) .catch(function(err) { console.error('获取麦克风权限失败:', err); });

使用MediaRecorder API实现录音

MediaRecorder API是更简单直接的录音解决方案，支持将录音保存为多种格式：

const startRecording = () => { navigator.mediaDevices.getUserMedia({ audio: true }) .then(stream => { const mediaRecorder = new MediaRecorder(stream); let audioChunks = [];

    mediaRecorder.ondataavailable = e => {
        audioChunks.push(e.data);
    };

    mediaRecorder.onstop = () => {
        const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
        const audioUrl = URL.createObjectURL(audioBlob);
        // 使用audioUrl播放或下载录音
    };

    mediaRecorder.start();
});

};

处理录音数据

录音完成后，可以将数据转换为可用的格式：

const saveRecording = (audioChunks) => { const audioBlob = new Blob(audioChunks, { type: 'audio/wav' }); const audioUrl = URL.createObjectURL(audioBlob);

// 创建下载链接
const a = document.createElement('a');
a.href = audioUrl;
a.download = 'recording.wav';
a.click();

// 或者创建音频元素播放
const audio = new Audio(audioUrl);
audio.play();

};

添加录音控制功能

完整的录音功能通常需要开始、暂停和停止控制：

let mediaRecorder; let audioChunks = [];

const startBtn = document.getElementById('start'); const stopBtn = document.getElementById('stop');

startBtn.addEventListener('click', () => { navigator.mediaDevices.getUserMedia({ audio: true }) .then(stream => { mediaRecorder = new MediaRecorder(stream); mediaRecorder.start();

    mediaRecorder.ondataavailable = e => {
        audioChunks.push(e.data);
    };
});

});

stopBtn.addEventListener('click', () => { mediaRecorder.stop(); // 录音停止后会触发onstop事件 });

处理浏览器兼容性

不同浏览器对录音API的支持程度不同，需要做兼容性处理：

if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) { alert('您的浏览器不支持录音功能'); } else if (!MediaRecorder) { alert('您的浏览器不支持MediaRecorder API'); } else { // 正常录音逻辑 }

音频格式选择

MediaRecorder支持多种音频格式，可以通过mimeType参数指定：

const options = { mimeType: 'audio/webm', // 也可以是'audio/wav'、'audio/mp3'等 audioBitsPerSecond: 128000 // 比特率 };

const mediaRecorder = new MediaRecorder(stream, options);

录音可视化

可以使用Canvas实现录音波形可视化：

const canvas = document.getElementById('visualizer'); const canvasCtx = canvas.getContext('2d');

const drawWaveform = (audioData) => { canvasCtx.clearRect(0, 0, canvas.width, canvas.height); canvasCtx.fillStyle = 'rgb(200, 200, 200)'; canvasCtx.fillRect(0, 0, canvas.width, canvas.height);

canvasCtx.lineWidth = 2;
canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
canvasCtx.beginPath();

const sliceWidth = canvas.width / audioData.length;
let x = 0;

for(let i = 0; i < audioData.length; i++) {
    const v = audioData[i] / 128.0;
    const y = v * canvas.height/2;

    if(i === 0) {
        canvasCtx.moveTo(x, y);
    } else {
        canvasCtx.lineTo(x, y);
    }

    x += sliceWidth;
}

canvasCtx.lineTo(canvas.width, canvas.height/2);
canvasCtx.stroke();

};