当前位置：首页 > JavaScript

js实现录音进度条回放

2026-01-31 10:40:48JavaScript

实现录音进度条回放的方法

使用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}%`;
});

完整实现要点