Javascript MediaRecorder音频记录损坏

Question

我正在努力在浏览器中获得录制音频，并使其在移动设备和桌面设备上正常工作。

我使用MediaRecorder开始录制，我想通过表单将其作为文件发送到我的Flask服务器。然而，我收到的是一个损坏的文件，有时在我的台式机上播放，但不在我的手机上播放。我认为它连接到支持的不同mime类型以及blob如何转换。

下面是JavaScript代码:

function record_audio(){
if(state == "empty"){
navigator.mediaDevices.getUserMedia({ audio: true })
.then(stream => {
mediaRecorder = new MediaRecorder(stream); 
mediaRecorder.start();
state = "recording";
document.getElementById('stop_btn').style.display = 'block'
seconds_int = setInterval(
function () {
document.getElementById("record_btn").innerHTML = seconds_rec + " s";
seconds_rec += 1;
}, 1000);

mediaRecorder.addEventListener("dataavailable", event => {

audioChunks.push(event.data);
if(mediaRecorder.state == 'inactive')  makeLink();
});
}
}
function makeLink(){
const audioBlob = new Blob(audioChunks, {type: 'audio/mpeg'});

const audioUrl = URL.createObjectURL(audioBlob);
var sound      = document.createElement('audio');
sound.id       = 'audio-player';
sound.controls = 'controls';
sound.src      = audioUrl;
console.log(audioBlob)
sound.type     = 'audio/mpeg';
document.getElementById("audio-player-container").innerHTML = sound.outerHTML;

let file = new File([audioBlob], "audio.mp3",{ type:"audio/mpeg",lastModifiedDate: new Date()});
let container = new DataTransfer();
container.items.add(file);
document.getElementById("uploadedFile").files = container.files;
};

谢谢你的帮助!

Answer 1

您录制的音频很可能不是'audio/mpeg'类型。没有浏览器支持开箱即用。

如果你调用new MediaRecorder(stream)没有第二个可选参数，浏览器将选择它最喜欢的编解码器。您可以使用mimeType属性来查找浏览器使用的编解码器。例如，它可以用来构建Blob。

const audioBlob = new Blob(
audioChunks,
{
type: mediaRecorder.mimeType
}
);

在创建File时也需要以类似的方式使用它。你可能还需要调整你的后端逻辑来处理非mp3文件。