I tried to download the recorded audio file using javascript, which is

0. Check if getUserMedia is supported --> okay
1. Hit play button and trigger Play() function --> okay
2. Hit stop button and trigger Stop() function --> okay
3. Stop() would trigger Download()

recordedBlobs seems fine by checking the log (size !=0),

but var blob = new Blob(recordedBlobs, {type: "audio/webm; codecs=opus"}); would return a empty blob.

Image for console.log

Also something weird: I found that console.log(recordedBlobs.length) is 0 ?! I'm kinda new to javascript, is this normal?

I feel really confused :( Any suggestions would be appreciated, thanks in advance.

Below is my code.

<script>
    let mediaRecorder;
    let recordedBlobs;
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
      console.log("getUserMedia supported.");
      navigator.mediaDevices
        .getUserMedia(
          {audio: true, video: false}
        )

        // Success callback
        .then(function (stream) {
           mediaRecorder = new MediaRecorder(stream);
        })

        // Error callback
        .catch(function (err) {
          console.log("The following getUserMedia error occurred: " + err);
        });
    } else {
      console.log("getUserMedia not supported on your browser!");
    }
    
    function handleDataAvailable(event) {
      console.log('handleDataAvailable', event);
      if (event.data && event.data.size > 0) {
        recordedBlobs.push(event.data);
      }
    }

    function Play() {
        console.log("play");
        recordedBlobs = [];
        mediaRecorder.ondataavailable = handleDataAvailable;
        mediaRecorder.start();
        console.log(mediaRecorder.state);
    }    

    function Stop() {
        console.log("stop");
        mediaRecorder.stop();
        downloadVideo();
    }    

    function downloadVideo() {
        console.log('recorded blob:', recordedBlobs);
        var blob = new Blob(recordedBlobs, {type: "audio/webm; codecs=opus"}); 
        console.log('new blob:', blob);
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.style.display = 'none';
        a.href = url;
        a.download = 'test.webm';
        document.body.appendChild(a);
        a.click();
        setTimeout(() => {
           document.body.removeChild(a);
            window.URL.revokeObjectURL(url);
        }, 100);
    }
</script>