Lo he intentado pero hay un error "Error de tipo: no se pueden leer las propiedades de undefined (leyendo 'detener')" Estoy llamando a la función en el botón, haga clic aquí también es una función :)
const getAudio= async ()=>{ let device = await navigator.mediaDevices.getUserMedia({audio: true}); let chunks = []; let recorder; device.then(stream => { recorder = new MediaRecorder(stream); recorder.ondataavailable = e => { chunks.push(e.data); if (recorder.state === 'inactive') { this.blob = new Blob(chunks, {type: 'audio/webm'}); let testAudioRecord = URL.createObjectURL(this.blob); console.log(testAudioRecord) } } recorder.start(1000); }); setTimeout(() => { recorder.stop(); // Cannot read ('stop') =error }, 2000) }Veo un poco de confusión entre el uso de async con await y el manejo de .then promise.
Dado que está utilizando una función asíncrona, refactoricemos para try...catch con await para esperar a que se resuelva la promoción.
const getAudio = async () => { let chunks = []; let recorder; try { //wait for the stream promise to resolve let stream = await navigator.mediaDevices.getUserMedia({ audio: true }); recorder = new MediaRecorder(stream); recorder.ondataavailable = (e) => { chunks.push(e.data); if (recorder.state === "inactive") { this.blob = new Blob(chunks, { type: "audio/webm" }); let testAudioRecord = URL.createObjectURL(this.blob); console.log(testAudioRecord); } }; recorder.start(1000); setTimeout(() => { recorder.stop(); }, 2000); } catch (e) { console.log("error getting stream", e); } };Hay mejores formas de construir el código, pero esto debería hacer que su función funcione.
Aquí hay un codesandbox con su función y una opción de reproducción.
Aquí hay otro audio codesandbox