P5.js and Django: Saving a soundfile to a server

p5.js Libraries
1

I am trying to record audio through the user’s microphone and then save it as a .wav file on the server running Django. I based my code on this: https://discourse.processing.org/t/uploading-recorded-audio-to-web-server-node-js-express/4569/4 I am getting two errors:

Error: [object ReadableStream]

p5.js:78248 Fetch failed loading:
POST h t t p: / / localhost:8000/ajax/postRecordedAudio/

The first thing my server code does is print out a message that “postRecordedAudio was reached”, so I know it’s not getting to that url.

I tried using a blobURL and passing that as a string. I tried using a form and attaching the soundblob to a file input field in the form. I tried making the soundblob into a file by adding a name and date attribute and then attaching it to the form. Any help is greatly appreciated!

This is cross=posted at stackoverflow (https://stackoverflow.com/questions/61303698/p5-js-and-django-saving-a-soundfile-to-a-server)

Here is the code, It just starts recording for one second and then tries to post it.

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  {% load static %}
<script src="https://cdn.jsdelivr.net/npm/p5@0.10.2/lib/p5.js"></script>
 <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/addons/p5.dom.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/addons/p5.sound.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <script>
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)=>{
    getAudioContext().resume();
    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 = '/ajax/postRecordedAudio/'; //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()
  </script>
1 Like