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