javascript - Record audio and then play

Question

I'm using vue.js and I have created 5 different sounds on my webpage the user can turn on/off a sound and creating a mix of sounds. Now I'm trying to record the mix that the user played and then play it.

Please advise how to implement this or what is wrong with my code, any advice will be appreciated.

Thanks

<template>
        <a class="rightButton"  @click="record" v-if="!startRecord">
        <div>record</div>
        </a>

        <a class="rightButton"  @click="record" v-if="startRecord">
        <div>stop</div>
        </a>

        <audio controls id="recorder"></audio>
        </div>

</template>

<script>
export default {
    data(){
        return{
            chunks:undefined,
            ac: undefined,
            osc: undefined,
            dest: undefined,
            mediaRecorder:undefined,
            startRecord : false
        }
    },
    methods:{
        record(){
            this.startRecord = !this.startRecord
            console.log(this.startRecord);
            if(this.startRecord){
                this.mediaRecorder.start();
                this.osc.start(0)
                console.log("start recorder: "  + this.mediaRecorder);
                
            }else{
                this.mediaRecorder.stop();
                this.osc.stop(0);
                console.log(this.mediaRecorder);
            }

        }
    },
    created(){
            this.ac = new AudioContext()
            this.osc = this.ac.createOscillator()
            this.dest = this.ac.createMediaStreamDestination()
            this.mediaRecorder = new MediaRecorder(this.dest.stream)
            this.osc.connect(this.dest);
    },
    watch:{
        mediaRecorder(){
            this.mediaRecorder.ondataavailable = function(event) {
                console.log("Blob event: ");
                console.log(event.data);
                this.chunks = []
                this.chunks.push(event.data);
                console.log("chunks: ");
                console.log(this.chunks);
        }

        this.mediaRecorder.onstop = function() {
       var blob = new Blob(this.chunks, { 'type' : 'audio/ogg; codecs=opus' });
       document.querySelector("audio").src = URL.createObjectURL(blob);
     };
    }
    }
}
</script>

Answer 1

等待大神答复