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 archiveUrl = serverUrl + "/add-to-archive/";
var canvasColour = "white";
var canvasHeight = 500;
var canvasWidth = 500;
var frameRate = 30;
var microphone;
var newSoundJustRecorded = false;
var playButton;
var recordButton;
var recorder;
var recording;
var recordingTimeout = 30000; // 30 seconds (in milliseconds)
var serverUrl = "http://localhost:5000"; // TODO: read from environment
var shapes = [];
var stopButton;

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?
}

class GeneratedShape {
  constructor() {
    /**
     * Initialise the new shape.
     **/
    this.w = 10;
    this.h = 10;

    this.x = random(width);
    this.y = random(height);

    this.xSpeed = 1.3;
    this.ySpeed = 0.7;

    this.xDirection = 1; // left or right
    this.yDirection = 1; // top or bottom
  }

  move() {
    /**
     * Move the shape around the canvas.
     **/
    this.x = this.x + this.xSpeed * this.xDirection;
    this.y = this.y + this.ySpeed * this.yDirection;

    if (this.x > width - this.w || this.x < this.w) {
      this.xDirection *= -1;
    }

    if (this.y > height - this.h || this.y < this.h) {
      this.yDirection *= -1;
    }
  }

  display() {
    /**
     * Show the shape on the canvas.
     **/
    ellipse(this.x, this.y, this.w, this.h); // TODO: experimenting for now ...
  }
}

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

function draw() {
  /**
   * The p5.js draw loop.
   **/
  background(canvasColour);

  if (newSoundJustRecorded === true) {
    shapes.push(new GeneratedShape());
    newSoundJustRecorded = false;
  }

  for (var i = 0; i < shapes.length; i++) {
    var shape = shapes[i];
    shape.move();
    shape.display();
  }
}