当前位置：首页 > JavaScript

js实现录音进度条回放

2026-03-02 01:57:39JavaScript

实现录音进度条回放的关键步骤

录音与存储音频数据
使用浏览器提供的 MediaRecorder API 进行录音，将录制的音频数据存储为 Blob 对象或 ArrayBuffer。录音过程中需记录时间戳，用于后续进度条同步。

js实现录音进度条回放

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

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

    mediaRecorder.start();
  });

生成可播放的音频对象
录音结束后，将存储的音频数据合并为单一 Blob，并创建 URL.createObjectURL 生成可播放的音频资源。

js实现录音进度条回放

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

进度条与播放同步
通过 audio 元素的 timeupdate 事件监听播放进度，实时更新进度条的 UI。进度条可使用 <input type="range"> 或自定义 <div> 实现。

audio.addEventListener('timeupdate', () => {
  const progress = (audio.currentTime / audio.duration) * 100;
  document.getElementById('progress-bar').style.width = `${progress}%`;
});

允许用户交互拖动进度条
为进度条添加事件监听，当用户拖动时调整音频的 currentTime 实现跳转播放。

const progressBar = document.getElementById('progress-bar-container');
progressBar.addEventListener('click', (e) => {
  const percent = e.offsetX / progressBar.offsetWidth;
  audio.currentTime = percent * audio.duration;
});

完整代码示例

<!-- HTML部分 -->
<div id="progress-bar-container" style="width: 100%; height: 10px; background: #ddd;">
  <div id="progress-bar" style="width: 0%; height: 100%; background: #4CAF50;"></div>
</div>
<button id="record">开始录音</button>
<button id="stop">停止录音</button>
<button id="play">播放</button>

<script>
  let mediaRecorder, audioChunks = [], audio;

  document.getElementById('record').addEventListener('click', () => {
    navigator.mediaDevices.getUserMedia({ audio: true })
      .then(stream => {
        mediaRecorder = new MediaRecorder(stream);
        mediaRecorder.ondataavailable = e => audioChunks.push(e.data);
        mediaRecorder.start();
      });
  });

  document.getElementById('stop').addEventListener('click', () => {
    mediaRecorder.stop();
    mediaRecorder.stream.getTracks().forEach(track => track.stop());
  });

  document.getElementById('play').addEventListener('click', () => {
    const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
    audio = new Audio(URL.createObjectURL(audioBlob));
    audio.addEventListener('timeupdate', updateProgressBar);
    audio.play();
  });

  function updateProgressBar() {
    const progress = (audio.currentTime / audio.duration) * 100;
    document.getElementById('progress-bar').style.width = `${progress}%`;
  }

  document.getElementById('progress-bar-container').addEventListener('click', (e) => {
    const percent = e.offsetX / e.target.offsetWidth;
    audio.currentTime = percent * audio.duration;
  });
</script>