I'm new to Vue.js and trying to create a simple audio recorder that starts recording on click of a button and stops when another button is clicked. The goal is to display the audio file in the template and save it locally as a blob.
Here is the template I have implemented:
<template>
<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>
And here is the script with the code:
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();
document.getElementById("button_stop").addEventListener("click", () => {
recorder.stop();
});
});
},
}
};
I have tried several ways to stop the recording upon clicking the stop button, but nothing seems to work. Any help would be greatly appreciated as I am new to Vue and Javascript.