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