录制音频时显示进度条答案

【问题标题】：Show progress bar while recording audio录制音频时显示进度条
【发布时间】：2018-09-05 07:04:52
【问题描述】：

我正在使用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;

这里，我需要根据录制过程增加进度条..如何实现呢？

【问题讨论】：

我对您的代码有疑问：是一个 Vue 组件，而不是 HTML 标签，对吧？在这种情况下，您不应该通过返回 HTML 对象的 id 来获取它，而应该通过 this.$refs.seekbar 获取它。如果 progress 是一个 Vue 组件，则不必通过 progressbar.value 设置其值，但可以将其作为 props 传递。如果我理解错了，你能粘贴一下你的进度组件的代码吗？
@MátéWiszt progress 是和 html 标签！ :)
@Margon：感谢您提供的信息，我从未使用过 :) 这里的重点是如何获得实际进度值。如果 Shrijana 可以将其保存在数据变量中，则可以为其创建一个观察者以始终更新进度条的值。
@MátéWiszt 我编辑了答案以完全匹配 shrijana 在理论上需要做的事情......顺便说一下，如果没有良好的 css 样式，请不要使用进度条，因为它很丑啊啊跨度>

标签： javascript vue.js progress-bar mediarecorder

【解决方案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);

【讨论】：

感谢您的有用回答！今天我学到了一些非常新的东西;)
@Margon 感谢您的回答。能否请您解释一下如何在 setTimeout 函数中计算和循环以更新进度条？

【解决方案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);

【讨论】：