javascript - 录制音频时显示进度条

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);