Javascript 具有两个按钮的音频录制功能，一个用于开始录制，另一个用于停止录制

我对Vue.js中的编程非常陌生，我想做的是一个简单的录音机，在单击录制按钮时开始录制音频，在单击停止按钮时停止录制。停止时，应在模板中显示音频文件，并将音频存储在blob中，该blob稍后应存储在本地

我实现了以下模板：

<template>
    <!-- Voice Record Title + Button -->
    <div class="form-group row">
        <label for="Audio" class="col-2 col-form-label labelTop">Audio</label>
        <div class="col-1">
            <button @click="recordAudio()" type="button" id="button_record" class="btn btn-danger">
            </button>
            <button type="button" id="button_stop" class="btn btn-success">
            </button>
            <div id="audio" class="audio" controls>
            </div>
        </div>
    </div>
</template>

或者：

if (document.getElementById("button_stop").clicked == true) {
                recorder.stop();
                }

而且：

document.getElementById("button_stop").addEventListener("click", recorder.stop());
                if (document.getElementById("button_stop").clicked == true) {
                    recorder.stop();
                }

但这些都不管用

由于我对Vue和Javascript一般来说都是新手，这让我很沮丧。

---

如果您能提供任何帮助，我将不胜感激。

您应该能够通过将

记录器

分配给组件中的变量来实现这一点，而不仅仅是在函数中。这样，您可以稍后单击按钮调用

this.recorder.stop（）

尝试：

模板：

<button type="button" id="button_stop" class="btn btn-success" @click="stop">

非常感谢，这已经解决了问题！该死，我真的很感激！我很抱歉再次打扰你，但是你可能也有解决这个问题的办法吗？

document.getElementById("button_stop").addEventListener("click", recorder.stop());
                if (document.getElementById("button_stop").clicked == true) {
                    recorder.stop();
                }

data() {
  return {
    recorder: null
  }
},
methods: {
    recordAudio() {
      var device = navigator.mediaDevices.getUserMedia({ audio: true });
      device.then((stream) => {
        // use this!
        this.recorder = new MediaRecorder(stream);
        this.recorder.ondataavailable = (e) => {
           // ....
        };
      });
    },
    // called on button click
    stop() {
      this.recorder.stop()
    }
}

<button type="button" id="button_stop" class="btn btn-success" @click="stop">