如何从客户端录制麦克风然后发送到服务器

Question

我想记录来自客户端的麦克风输入，然后当他停止时，将数据发送到服务器，然后将录制的音频输出到特定文件夹。

到目前为止，我已经在我关注的客户端上进行了录制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) 在客户端上 returns 一个对象

Blob { size: 35412, type: "audio/ogg; codecs=opus" }

在服务器端我使用Node.js

app.post("/notes",function(req,res){
  console.log(req);
});

服务器收到 formData 但正文为空{}

我也试过 XMLHttpRequest 得到了同样的结果。

Answer 1

我以前玩过这类项目。我创建了一个简单的表格，允许您从麦克风录音，然后上传到服务器。

声音文件将保存在./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>

如何从客户端录制麦克风然后发送到服务器

How to record mic from client then send to server

xmlhttprequest

fetch

recording

node.js

mediastream