录制音频时显示进度条

Question

我正在使用MediaRecorder来录制音频。并且，我想显示该录制过程的进度条。我在录音机模板中的代码：

 <p id="countdowntimer">Current Status: Beginning in<span id="countdown">10</span> seconds</p>
 <progress ref="seekbar" value="0" max="1" id="progressbar"></progress>

我的功能：

mounted() {
let timeleft = 10;
const timeToStop = 20000;
const timeToStart = 1000;
const downloadTimer = setInterval(() => {
  timeleft -= 1;
  document.getElementById('countdown').textContent = timeleft;
  if (timeleft <= 0) {
    clearInterval(downloadTimer);
    document.getElementById('countdowntimer').textContent = 'Current Status: Recording';


    const that = this;
    navigator.getUserMedia = navigator.getUserMedia ||
      navigator.webkitGetUserMedia ||
      navigator.mozGetUserMedia;
    navigator.getUserMedia({ audio: true, video: false }, (stream) => {
      that.stream = stream;
      that.audioRecorder = new MediaRecorder(stream, {
        mimeType: 'audio/webm;codecs=opus',
        audioBitsPerSecond: 96000,
      });

      that.audioRecorder.ondataavailable = (event) => {
        that.recordingData.push(event.data);
      };

      that.audioRecorder.onstop = () => {
        const blob = new Blob(that.recordingData, { type: 'audio/ogg' });
        that.dataUrl = window.URL.createObjectURL(blob);
        // document.getElementById('audio').src = window.URL.createObjectURL(blob);
      };

      that.audioRecorder.start();

      console.log('Media recorder started');

      setTimeout(() => {
        that.audioRecorder.stop();
        document.getElementById('countdowntimer').textContent = 'Current Status: Stopped';
        console.log('Stopped');
      }, timeToStop);
    }, (error) => {
      console.log(JSON.stringify(error));
    });
  }
}, timeToStart);

}

对于进度条，我正在尝试：

  const progressbar = document.getElementById('progressbar');
  progressbar.value = some value;

在这里，我需要根据录制过程增加进度条。如何实现这一目标？

Answer 1

代替

<progress ref="seekbar" value="0" max="1" id="progressbar"></progress>

做这个

<progress ref="seekbar" value="0" max="100" id="progressbar"></progress>

在您的周期中，您可以按如下方式计算进度条值：

const progressbar = document.getElementById('progressbar');
progressbar.value = 100*(ELAPSED TIME) / timetostop;

编辑：

您的“经过时间”可以按如下方式计算

elapsedTime = 0;

setTimeout(function () {
   //your functions in the loop:
    elapsedTime+1000;
}, 1000);

Answer 2

我通过这种方式解决了我的问题：

    const elem = document.getElementById('progressbar');
    let width = 1;
    const id = setInterval(() => {
      if (width >= 100) {
        clearInterval(id);
      } else {
        const timeTOStopInSec = timeToStop / 1000;
        width += 100 / timeTOStopInSec;
        elem.value = width;
      }
    }, timeToStart);