js实现录音进度条回放
实现录音进度条回放的方法
使用Web Audio API和MediaRecorder API Web Audio API提供了音频处理的底层能力，MediaRecorder API用于录制音频流。结合两者可以实现录音和回放功能。
创建音频上下文和节点链
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioContext.createAnalyser();
analyser.fftSize = 256;设置录音逻辑
navigator.mediaDevices.getUserMedia({ audio: true })
.then(stream => {
const mediaRecorder = new MediaRecorder(stream);
const source = audioContext.createMediaStreamSource(stream);
source.connect(analyser);
let audioChunks = [];
mediaRecorder.ondataavailable = e => audioChunks.push(e.data);
mediaRecorder.onstop = () => {
const audioBlob = new Blob(audioChunks);
const audioUrl = URL.createObjectURL(audioBlob);
audioChunks = [];
};
});实现进度条渲染
function drawProgress() {
requestAnimationFrame(drawProgress);
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
analyser.getByteTimeDomainData(dataArray);
canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
canvasCtx.lineWidth = 2;
canvasCtx.strokeStyle = 'rgb(0, 123, 255)';
canvasCtx.beginPath();
const sliceWidth = canvas.width / bufferLength;
let x = 0;
for(let i = 0; i < bufferLength; i++) {
const v = dataArray[i] / 128.0;
const y = v * canvas.height/2;
i === 0 ? canvasCtx.moveTo(x, y) : canvasCtx.lineTo(x, y);
x += sliceWidth;
}
canvasCtx.lineTo(canvas.width, canvas.height/2);
canvasCtx.stroke();
}添加回放控制
const audioElement = new Audio();
audioElement.src = audioUrl;
audioElement.controls = true;
// 同步进度条与播放位置
audioElement.addEventListener('timeupdate', () => {
const progressPercent = (audioElement.currentTime / audioElement.duration) * 100;
progressBar.style.width = `${progressPercent}%`;
});完整实现要点
- 使用requestAnimationFrame实现流畅的波形绘制
- 通过AudioContext.timeDomain数据生成动态波形
- 添加事件监听器同步播放进度与可视化进度条
- 注意处理移动端兼容性问题
注意事项
- 确保在用户交互后初始化音频上下文（iOS限制）
- 录制前检查权限状态
- 处理不同浏览器的API前缀差异
- 释放对象URL防止内存泄漏
