如何解决如何从客户端录制麦克风然后发送到服务器
我想记录来自客户端的麦克风输入，然后当他停止时，将数据发送到服务器，然后将录制的音频输出到特定文件夹。
到目前为止，我已经关注了客户的录音this
mediaRecorder.onstop = function(e) {
console.log("recorder stopped");
const blob = new Blob(chunks,{ 'type' : 'audio/ogg; codecs=opus' });
chunks = [];
const formData = new FormData();
formData.append('audio-file',blob);
return fetch('http://localhost:3000/notes',{
method: 'POST',body: formData
});
}
客户端上的console.log(blob)返回一个对象
Blob { size: 35412,type: "audio/ogg; codecs=opus" }
在服务器端我使用 Node.js
app.post("/notes",function(req,res){
console.log(req);
});
服务器收到 formData 但正文为空 {}
我也尝试过 XMLHttpRequest，结果相同。
解决方法
我以前玩过这种类型的项目。我创建了一个简单的表单，允许您从麦克风录制，然后上传到服务器。
声音文件将保存在 ./sound_files
像运行节点服务器一样
节点 server.js
然后转到 localhost:3000 查看页面。
节点代码（server.js）
const express = require('express');
const multer = require('multer');
const storage = multer.diskStorage(
{
destination: './sound_files/',filename: function (req,file,cb ) {
cb( null,file.originalname);
}
}
);
const upload = multer( { storage: storage } );
const app = express();
const port = 3000;
app.use(express.static('./'));
app.post("/notes",upload.single("audio_data"),function(req,res){
res.status(200).send("ok");
});
app.listen(port,() => {
console.log(`Express server listening on port: ${port}...`);
});
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Speech to text test</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://bootswatch.com/4/cerulean/bootstrap.min.css">
</head>
<body style="padding:50px;">
<h1>Speech to text test</h1>
<div id="controls">
<button id="recordButton">Record</button>
<button id="transcribeButton" disabled>Stop and upload to server</button>
</div>
<div id="output"></div>
<script src="https://cdn.rawgit.com/mattdiamond/Recorderjs/08e7abd9/dist/recorder.js"></script>
<script>
let rec = null;
let audioStream = null;
const recordButton = document.getElementById("recordButton");
const transcribeButton = document.getElementById("transcribeButton");
recordButton.addEventListener("click",startRecording);
transcribeButton.addEventListener("click",transcribeText);
function startRecording() {
let constraints = { audio: true,video:false }
recordButton.disabled = true;
transcribeButton.disabled = false;
navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
const audioContext = new window.AudioContext();
audioStream = stream;
const input = audioContext.createMediaStreamSource(stream);
rec = new Recorder(input,{ numChannels: 1 })
rec.record()
document.getElementById("output").innerHTML = "Recording started..."
}).catch(function(err) {
recordButton.disabled = false;
transcribeButton.disabled = true;
});
}
function transcribeText() {
document.getElementById("output").innerHTML = "Converting audio to text..."
transcribeButton.disabled = true;
recordButton.disabled = false;
rec.stop();
audioStream.getAudioTracks()[0].stop();
rec.exportWAV(uploadSoundData);
}
function uploadSoundData(blob) {
const filename = "sound-file-" + new Date().getTime() + ".wav";
const formData = new FormData();
formData.append("audio_data",blob,filename);
fetch('http://localhost:3000/notes',{
method: 'POST',body: formData
}).then(async result => {
document.getElementById("output").innerHTML = await result.text();
}).catch(error => {
document.getElementById("output").innerHTML = "An error occurred: " + error;
})
}
</script>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
