使用Recorder.js录音时点击暂停按钮无法停止音频计时的问题

问题原因 #

当前仅在录音启动时创建了每秒更新计时的定时器，未在触发暂停操作时清除该定时器，因此计时逻辑会持续运行。

修复步骤 #

• 第一步：将定时器ID设置为全局可访问
  你当前将intervalId定义在getUserMedia的回调作用域内，暂停、停止按钮的事件回调无法访问该变量，需要将其提到上层公共作用域：

// 在JS代码最顶层定义公共变量
let intervalId;
const statusText = document.getElementById('status-text');
const pauseButton = document.getElementById('pauseButton');
const stopButton = document.getElementById('stopButton');

• 第二步：在暂停按钮的点击事件中清除定时器
  在原有暂停录音的逻辑后，新增清除定时器的代码：

pauseButton.addEventListener('click', function() {
  // 原有Recorder.js暂停录音的逻辑保留，无需修改
  clearInterval(intervalId); // 新增：停止计时更新
})

• 第三步：补充恢复录音、停止录音的计时适配
  1. 暂停后恢复录音时，重新启动定时器即可继续计时
  2. 点击停止按钮结束录音时，清除定时器同时重置计时显示：

stopButton.addEventListener('click', function() {
  // 原有停止录音、保存音频的逻辑保留
  clearInterval(intervalId);
  statusText.innerText = ''; // 清空计时
})

可选优化 #

如果直接使用audioContext.currentTime获取录音时长，暂停时调用audioContext.suspend()，恢复时调用audioContext.resume()，上下文时间会自动暂停计数，无需额外计算时长差值，逻辑更简洁。

内容的提问来源于stack exchange，提问作者Owaiz Yusufi