Javascript 录制音频时显示进度条

我正在使用

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>

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

而不是

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

编辑：

您的“已用时间”可按如下方式计算

elapsedTime = 0;

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

---

我通过以下方式解决了我的问题：

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

---

我对您的代码有一个问题：是Vue组件，不是HTML标记，对吗？在这种情况下，您不应该通过返回HTML对象的id获取它，而应该通过此。$refs.seekbar获取它。如果progress是Vue组件，则不必通过progressbar.value设置其值，但可以将其作为道具传递。如果我理解错了情况，你能粘贴进度组件的代码吗？@MátéWiszt is和html标记！：）@玛金：谢谢你提供的信息，我从来没有用过：）这里的重点是你如何得到实际的进度值。如果Shrijana可以将其保存在数据变量中，则可以为其创建一个监视程序，以始终更新进度条的值。@MátéWiszt我编辑了答案，以精确匹配Shrijana理论上需要做的事情。。。顺便说一句，如果没有一个好的css样式，永远不要使用进度条，因为它非常难看。谢谢你的有用答案！今天我学到了一些非常新的东西；）@谢谢你的回答。你能解释一下如何计算和循环setTimeout函数来更新进度条吗？

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

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