I use navigator.mediaDevices.getUserMedia and MediaRecorder to record a audio file.
<!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>
But the result file is damaged. There is no time information.
I found some similar questions. But there is no available solution.
And I found there is no this problem in Safari. My Chrome version is 98.0.4758.109.