使用 p5 将音频从客户端上传到服务器时出错

Posted 2023-02-26

【中文标题】使用 p5 将音频从客户端上传到服务器时出错

【英文标题】：Error in uploading audio from client to server using p5

【发布时间】：2022-01-22 19:25:21

【问题描述】：

我们是来自意大利米兰理工大学的五名学生！ 我们正在学习一个创意编码课程，为了展示我们的最终项目，我们需要解决一些小问题：我们必须找到一种从客户端上传音频文件并将其保存在服务器中的方法。

我们的问题（如下图所示）是函数 getBlob() 不起作用，能否请您帮我们一些帮助以正确运行代码？

我们链接我们正在使用的存储库：https://github.com/ikilol/Soundloading 太感谢了！ :)

这里是相关的客户端源代码：

let button;
let mic;
let soundRec;
let soundFile;


function setup() 
  mic = new p5.AudioIn();
  mic.start();
  soundRec = new p5.SoundRecorder();
  soundRec.setInput(mic)
  soundFile = new p5.SoundFile();

  button = createDiv("");
  button.position(100,100);
  button.size(100,100);
  button.style('background-color', 'grey');


  button.mouseClicked((mouseEvent)=>
    console.log("recording....");
    soundRec.record(soundFile); // set up the soundfile to record and start recording

    let recordingTimer = setTimeout(()=> // setup a timeout for the recording, after the time below expires, do the tings inside the 

      soundRec.stop(); // stop recording

      let soundBlob = soundFile.getBlob(); //get the recorded soundFile's blob & store it in a variable


      let formdata = new FormData() ; //create a from to of data to upload to the server
      formdata.append('soundBlob', soundBlob,  'myfiletosave.wav') ; // append the sound blob and the name of the file. third argument will show up on the server as req.file.originalname

          // Now we can send the blob to a server...
      var serverUrl = '/upload'; //we've made a POST endpoint on the server at /upload
      //build a HTTP POST request
      var httpRequestOptions = 
        method: 'POST',
        body: formdata , // with our form data packaged above
        headers: new Headers(
          'enctype': 'multipart/form-data' // the enctype is important to work with multer on the server
        )
      ;
      // console.log(httpRequestOptions);
      // use p5 to make the POST request at our URL and with our options
      httpDo(
        serverUrl,
        httpRequestOptions,
        (successStatusCode)=> //if we were successful...
          console.log("uploaded recording successfully: " + successStatusCode)
        ,
        (error)=>console.error(error);
      )
      console.log('recording stopped');

    ,1000) //record for one second

  ) // close mouseClicked handler


 //close setup()

【参考方案1】：

根据我的经验，当您开始录音时麦克风并未真正初始化时，就会发生这种情况。麦克风需要初始化以响应用户输入（即鼠标点击），这需要在您开始录制之前进行。