voicegardens/vocoder/static/vocoder.js

//
// Vocoder front-end Javascript
//
// https://learnxinyminutes.com/docs/javascript/
// https://developer.mozilla.org/en-US/docs/web/javascript/reference
//

// TODO: Read this from the environment so it can run propoerly
// depending on whether it is in development or production mode
var serverUrl = 'http://localhost:5000';
var archiveUrl = serverUrl + '/add-to-archive/';

function setupRecording(){
  var mic, recorder, soundFile;
  var state = 0;

  mic = new p5.AudioIn();
  mic.start();
  recorder = new p5.SoundRecorder();
  recorder.setInput(mic);
  soundFile = new p5.SoundFile();

  function doRecording(){
    // TODO: handle timing out if no stopping happens
    if (mic.enabled){
      recorder.record(soundFile);
    }
  };

  function doStopping(){
    // TODO: only stop if playing/recording otherwise:
    // "NotSupportedError: Operation is not supported"
    recorder.stop();

    // TODO: handle the generation of shapes from here
  };

  function doPlaying(){
    soundFile.play();
  };

  function doArchiving(){
    var soundBlob = soundFile.getBlob();

    var httpRequestOptions = {
      method: 'POST',
      body: new FormData().append('soundBlob', soundBlob),
      headers: new Headers({enctype: 'multipart/form-data'})
    };

    // TODO: do error handling when things fail
    // TODO: this doesn't actually work right now
    httpDo(archiveUrl, httpRequestOptions);
  };

  // TODO: we'll probably want something more glam than 
  // some default buttons but that's fine for experimenting
  recordButton = createButton('record');
  recordButton.position(10, 90);
  recordButton.mousePressed(doRecording);

  stopButton = createButton('stop');
  stopButton.position(120, 90);
  stopButton.mousePressed(doStopping);

  playButton = createButton('play');
  playButton.position(210, 90);
  playButton.mousePressed(doPlaying);

  playButton = createButton('archive');
  playButton.position(300, 90);
  playButton.mousePressed(doArchiving);
}

function setup(){
  // TODO: Replace this with the leaflet/mappa setup just 
  // using this for now to draw something to experiment on
  createCanvas(600, 600);

  setupRecording();
}

function draw(){}