录音功能有两个按钮，一个用于开始录音，另一个用于停止录音

Question

我对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_stop

@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还很陌生，这真的让我很沮丧。如果有任何帮助，我将不胜感激。

Answer 1

您应该能够通过将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">

Answer 2

在这里，我的父组件启动recordAudio和stop方法。在完成记录之后，数据被发送到父节点以发送到另一个子节点&从那里发送到服务器。有点像whatsapp的语音消息，结果被添加到上面的聊天中。

<template>
<!-- Voice Record -->
<div>
<v-btn @click="recordAudio()">
<v-icon> mdi-microphone </v-icon>
</v-btn>
<v-btn @click="stop()">
<v-icon> mdi-stop-circle-outline </v-icon>
</v-btn>
</div>
</template>
<script>
export default {
data() {
return {
recorder: null,
chunks: [],
device: null,
blobObj: null,
};
},
created() {
this.device = navigator.mediaDevices.getUserMedia({ audio: true });
},
methods: {

recordAudio() {
this.device.then((stream) => {
this.recorder = new MediaRecorder(stream);
this.recorder.ondataavailable = (e) => {
this.chunks.push(e.data);
if (this.recorder.state === "inactive") {
let blob = new Blob(this.chunks, { type: "audio/wav" });
// save to blobObj
this.blobObj = blob;
this.chunks = [];
// emit to parent
this.$emit("send-audio", this.blobObj);
this.blobObj = null;
}
};
// start
this.recorder.start();
});
},
stop() {
// stop
this.recorder.stop();
},
},
};
</script>