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/";

var mic, recorder, soundFile;
var recordingTimeout = 30000; // 30 seconds (in milliseconds)
var shouldGenerateNewShape = false;

function setupRecording() {
  mic = new p5.AudioIn();
  mic.start();

  recorder = new p5.SoundRecorder();
  recorder.setInput(mic);

  soundFile = new p5.SoundFile();

  function doRecording() {
    if (mic.enabled) {
      setTimeout(recorder.record(soundFile), recordingTimeout);
    }
  }

  function doStopping() {
    if (recorder.recording) {
      recorder.stop();
      shouldGenerateNewShape = true;
    }
  }

  function doPlaying() {
    if (soundFile.isLoaded()) {
      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 collectSoundParamters() {
  // TODO: collect all the sound parameters
  // [x] amplitude
  // [x] length of sound
  // [ ] pitch
  // [ ] nuance
  //     btw, there is no "nuance" function for p5js. My current guess is to
  //     perhaps measure it from the "getPeaks". For all wave peaks measured,
  //     ??? (need to think this through, not really sure ...)
  amplitude = soundFile.getPeaks();
  duration = soundFile.duration();
}

function generateShape() {
  // TODO: take in sound parameters and generate a shape
  ellipse(100, 100, 25, 25);
}

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() {
  if (shouldGenerateNewShape) {
    collectSoundParamters();
    generateShape();
    shouldGenerateNewShape = false;
  }
}