I have an issue with MediaRecorder output having no metadata on duration of the audio file using the simple code below (please use this JSFiddle on iPhone or Mac because the iframe on SO does not allow microphone permission). Or you can use the following file: https://github.com/user-attachments/files/16905190/ios-recording.zip
On Android, I used this answer to fix it already by parsing the EBML headers. On iOS, WebM is not supported and the output is an .mp4 file even though I only record audio. Is there any similar solution for this output file?
let recorder;
let chunks;
document.querySelector("#stop").addEventListener("click", () => {
recorder.stop();
});
document.querySelector("#start").addEventListener("click", async () => {
const stream = await navigator.mediaDevices.getUserMedia({
audio: true,
video: false,
});
recorder = new MediaRecorder(stream);
chunks = [];
recorder.ondataavailable = function(e) { chunks.push(e.data); };
recorder.onstop = async function() {
const blob = new Blob(chunks, { type: recorder.mimeType });
const url = window.URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "recording";
a.click();
for (const t of stream.getTracks()) {
t.stop();
}
};
recorder.start();
});<button id="start">
Start
</button>
<button id="stop">
Stop
</button>3