Uso navigator.mediaDevices.getUserMedia y MediaRecorder para grabar un archivo de audio.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style> </head> <body> <p>start recording auto, click download to download record file</p> <button id='download'>download</button> <script> const recordedChunks = []; document.getElementById('download').addEventListener('click', download) let mediaStream, mediaRecorder; startRecord(); async function startRecord () { const constraints = { audio: true }; mediaStream = await navigator.mediaDevices.getUserMedia(constraints) mediaRecorder = new MediaRecorder(mediaStream); mediaRecorder.ondataavailable = handleDataAvailable; mediaRecorder.start(1000); function handleDataAvailable(event) { recordedChunks.push(event.data); } } function download () { mediaRecorder.stop(); const blob = new Blob(recordedChunks, { type: 'audio/webm' }); const a = document.createElement('a') url = URL.createObjectURL(blob) a.href = url a.download = '1.webm' a.click(); URL.revokeObjectURL(url) } </script> </body> </html>Pero el archivo de resultados está dañado. No hay información de tiempo.
Encontré algunas preguntas similares. Pero no hay solución disponible.
Y descubrí que no hay este problema en Safari. Mi versión de Chrome es 98.0.4758.109.