diff --git a/vocoder/static/vocoder.js b/vocoder/static/vocoder.js index b53c893..201c223 100644 --- a/vocoder/static/vocoder.js +++ b/vocoder/static/vocoder.js @@ -7,72 +7,72 @@ // 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 serverUrl = 'http://localhost:5000' +var archiveUrl = serverUrl + '/add-to-archive/' -var mic, recorder, soundFile; -var recordingTimeout = 30000; // 30 seconds (in milliseconds) -var shouldGenerateNewShape = false; +var mic, recorder, soundFile +var recordingTimeout = 30000 // 30 seconds (in milliseconds) +var shouldGenerateNewShape = false function setupRecording(){ - mic = new p5.AudioIn(); - mic.start(); + mic = new p5.AudioIn() + mic.start() - recorder = new p5.SoundRecorder(); - recorder.setInput(mic); + recorder = new p5.SoundRecorder() + recorder.setInput(mic) - soundFile = new p5.SoundFile(); + soundFile = new p5.SoundFile() function doRecording(){ if (mic.enabled){ - setTimeout(recorder.record(soundFile), recordingTimeout); + setTimeout(recorder.record(soundFile), recordingTimeout) } - }; + } function doStopping(){ if (recorder.recording) { - recorder.stop(); - shouldGenerateNewShape = true; + recorder.stop() + shouldGenerateNewShape = true } - }; + } function doPlaying(){ if (soundFile.isLoaded()){ - soundFile.play(); + soundFile.play() } - }; + } function doArchiving(){ - var soundBlob = soundFile.getBlob(); + 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); - }; + 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); + recordButton = createButton('record') + recordButton.position(10, 90) + recordButton.mousePressed(doRecording) - stopButton = createButton('stop'); - stopButton.position(120, 90); - stopButton.mousePressed(doStopping); + stopButton = createButton('stop') + stopButton.position(120, 90) + stopButton.mousePressed(doStopping) - playButton = createButton('play'); - playButton.position(210, 90); - playButton.mousePressed(doPlaying); + playButton = createButton('play') + playButton.position(210, 90) + playButton.mousePressed(doPlaying) - playButton = createButton('archive'); - playButton.position(300, 90); - playButton.mousePressed(doArchiving); + playButton = createButton('archive') + playButton.position(300, 90) + playButton.mousePressed(doArchiving) } function collectSoundParamters(){ @@ -84,27 +84,27 @@ function collectSoundParamters(){ // 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(); + amplitude = soundFile.getPeaks() + duration = soundFile.duration() } function generateShape(){ // TODO: take in sound parameters and generate a shape - ellipse(100, 100, 25, 25); + 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); + createCanvas(600, 600) - setupRecording(); + setupRecording() } function draw(){ if (shouldGenerateNewShape){ - collectSoundParamters(); - generateShape(); - shouldGenerateNewShape = false; + collectSoundParamters() + generateShape() + shouldGenerateNewShape = false } }