<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<title>Recorder App</title>
</head>
<h2>Recorder App</h2>
<p>
<button type="button" id="record">Record</button>
<button type="button" id="stopRecord" disabled>Stop</button>
</p>
<p>
<audio id="recordedAudio"></audio>
</p>
<script>
navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => {
handlerFunction(stream);
});
function handlerFunction(stream) {
rec = new MediaRecorder(stream);
rec.ondataavailable = (e) => {
audioChunks.push(e.data);
if (rec.state == "inactive") {
let blob = new Blob(audioChunks, { type: "audio/mp3" });
recordedAudio.src = URL.createObjectURL(blob);
recordedAudio.controls = true;
recordedAudio.autoplay = true;
sendData(blob);
}
};
}
function sendData(data) {}
record.onclick = (e) => {
record.disabled = true;
record.style.backgroundColor = "blue";
stopRecord.disabled = false;
audioChunks = [];
rec.start();
};
stopRecord.onclick = (e) => {
record.disabled = false;
stop.disabled = true;
record.style.backgroundColor = "red";
rec.stop();
};
</script>
如何在本地保存记录的javascript文件，并通过ajax将其传递到后端flask？
代码运行良好，但没有在本地保存文件。我也试图通过ajax将文件直接传递到flask后端，但我在flask中收到的文件是空的。
此外，如果我能将该文件转换为.wav，那将是一件很棒的事情，因为我正在将其用于ASR项目。
如果您在本地保存文件(目的是将其发送到服务器(，则用户需要显式选择要将其发送给服务器的文件。
您需要在全局范围内放置audioChunks，才能用于其他功能：
audioChunks = [];
record.onclick = (e) => {
record.disabled = true;
record.style.backgroundColor = 'blue';
stopRecord.disabled = false;
// audioChunks = [];
rec.start();
};
此外，MediaRecorder需要在stopRecord.onclick((的作用域中可用，请查看此处：
MDN MediaRecorder
查看此帖子以上传文件如何使用JS fetch API上传文件？
文件到.wav的转换需要在服务器端中完成