voicegardens/vocoder/static/vocoder.js

"use strict";

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

var serverUrl = "http://localhost:5000"; // TODO: read from environment
var archiveUrl = serverUrl + "/add-to-archive/";
var microphone;
var recorder;
var recording;
var recordingTimeout = 30000; // 30 seconds (in milliseconds)
var newSoundJustRecorded = false;
var shapes = [];

function record() {
  /**
   * Starting recording.
   **/
  if (microphone.enabled) {
    setTimeout(recorder.record(recording), recordingTimeout);
  }
}

function stop() {
  /**
   * Stop recording a new recording.
   **/
  if (recorder.recording) {
    recorder.stop();
    newSoundJustRecorded = true;
  }
}

function play() {
  /**
   * Play the recording.
   **/
  if (recording.isLoaded()) {
    recording.play();
  }
}

function archive() {
  /**
   * Send the recording to the back-end.
   **/
  var soundBlob = recording.getBlob();

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

  httpDo(archiveUrl, httpRequestOptions); // TODO: add error handling and fix
}

function setupRecording() {
  /**
   * Setup logic for recording.
   **/
  microphone = new p5.AudioIn();
  microphone.start();

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

  recording = new p5.SoundFile();

  // TODO: buttons are just for experimenting ...
  recordButton = createButton("record");
  recordButton.position(10, 90);
  recordButton.mousePressed(record);

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

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

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

function getSoundInfo() {
  /**
   * Retrieve sound information like pitch, amplitude, duration, etc.
   **/
  amplitude = recording.getPeaks();
  duration = recording.duration();
  // pitch?
  // nuance?
}

function generateNewShape() {
  /**
   * Create a new p5.js shape.
   **/
  ellipse(100, 100, 25, 25); // TODO: experimenting for now ...
}

class GeneratedShape {
  move() {
    /**
     * Move the shape in some direction.
     **/
  }

  display() {
    /**
     * Show the shape on the canvas.
     **/
    ellipse(random(600), random(600), 10, 10); // TODO: experimenting for now ...
  }
}

function setup() {
  /**
   * The p5.js initial setup function.
   **/
  createCanvas(600, 600); // TODO: experimenting for now ...
  setupRecording();
}

function draw() {
  /**
   * The p5.js draw loop.
   **/
  if (newSoundJustRecorded === true) {
    shapes.push(generateNewShape());
    newSoundJustRecorded = false;
  }

  for (var shape of shapes) {
    shape.display();
  }
}