时间戳

首页 > 解决方案 > 带有两个按钮的录音功能，一个用于开始录音，另一个用于停止录音

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>

该脚本包含以下代码：

export default {
    methods: {
        recordAudio() {
            var device = navigator.mediaDevices.getUserMedia({ audio: true });
            var items = [];
            device.then((stream) => {
                var recorder = new MediaRecorder(stream);
                recorder.ondataavailable = (e) => {
                    items.push(e.data);
                    if (recorder.state == "inactive") {
                        var blob = new Blob(items, { type: "audio/*" });
                        var audio = document.getElementById("audio");
                        var mainaudio = document.createElement("audio");
                        mainaudio.setAttribute("controls", "controls");
                        audio.appendChild(mainaudio);
                        mainaudio.innerHTML =
                            '<source src="' +
                            URL.createObjectURL(blob) +
                            '" type="audio/*" />';
                    }
                };
                recorder.start();
                // I do not want a timeout to stop the recording but clicking the stop button to do so
                setTimeout(() => {
                    recorder.stop();
                }, 5000);
            });
        },
    },
};

这听起来可能很简单，但我现在唯一想做的是它在几秒钟后停止录制而不使用此超时功能，而是在单击button_stop. 我尝试了很多东西，例如直接将事件处理程序设置为button_stopwith

@click="recorder.stop()"

或者也：

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 很陌生，这真的让我很沮丧。我真的很感激任何帮助。

标签： javascriptvue.jsdom-eventsaudio-recordinggetusermedia

解决方案

您应该能够通过分配recorder给组件中的变量来实现这一点，而不仅仅是在您的函数中。有了它，您可以稍后this.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">

推荐阅读