P5. js и Django: сохранение звукового файла на сервере - PullRequest
Новая
       35

P5. js и Django: сохранение звукового файла на сервере

0 голосов
/ 19 апреля 2020

Я пытаюсь записать звук через микрофон пользователя, а затем сохранить его как wav на сервере под управлением Django. Я основал свой код на этом: https://discourse.processing.org/t/uploading-recorded-audio-to-web-server-node-js-express/4569/4 Я получаю две ошибки:

Ошибка: [object ReadableStream]

p5. js: 78248 Загрузка не удалась : POST "http://localhost: 8000 / ajax / postRecordedAudio / ".

error messages

Первое, что делает мой серверный код распечатайте сообщение, что "postRecordedAudio был достигнут", так что я знаю, что он не доходит до этого URL.

Я попытался использовать blobURL и передать его в виде строки. Я попытался использовать форму и прикрепить звуковую метку к полю ввода файла в форме. Я попытался превратить звуковую метку в файл, добавив атрибут имени и даты, а затем прикрепив его к форме. Любая помощь с благодарностью!

Этот вопрос кросс-пост на форуме обработки: https://discourse.processing.org/t/p5-js-and-django-saving-a-soundfile-to-a-server/19930

Вот код, он просто начинает запись на одну секунду а затем пытается опубликовать его. 

    <!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>
...