Traté de descargar el archivo de audio grabado usando javascript, que es

0. Compruebe si getUserMedia es compatible --> está bien
1. Presiona el botón de reproducción y activa la función Reproducir () -> está bien
2. Presiona el botón de detener y activa la función Stop () -> está bien
3. Stop() activaría Download()

recordedBlobs parece estar bien al verificar el registro (tamaño! = 0),

pero var blob = new Blob(recordedBlobs, {type: "audio/webm; codecs=opus"}); devolvería un blob vacío.

Imagen para console.log

También algo raro: encontré que console.log(recordedBlobs.length) es 0?! Soy un poco nuevo en javascript, ¿es esto normal?

Me siento realmente confundido :( Cualquier sugerencia sería apreciada, gracias de antemano.

A continuación se muestra mi código.

 <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>