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