"use strict"; // // Vocoder front-end Javascript // // https://learnxinyminutes.com/docs/javascript/ // https://developer.mozilla.org/en-US/docs/web/javascript/reference // var serverUrl = "http://localhost:5000"; // TODO: read from environment var archiveUrl = serverUrl + "/add-to-archive/"; var microphone; var recorder; var recording; var recordingTimeout = 30000; // 30 seconds (in milliseconds) var newSoundJustRecorded = false; var shapes = []; 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? } function generateNewShape() { /** * Create a new p5.js shape. **/ ellipse(100, 100, 25, 25); // TODO: experimenting for now ... } class GeneratedShape { move() { /** * Move the shape in some direction. **/ } display() { /** * Show the shape on the canvas. **/ ellipse(random(600), random(600), 10, 10); // TODO: experimenting for now ... } } function setup() { /** * The p5.js initial setup function. **/ createCanvas(600, 600); // TODO: experimenting for now ... setupRecording(); } function draw() { /** * The p5.js draw loop. **/ if (newSoundJustRecorded === true) { shapes.push(generateNewShape()); newSoundJustRecorded = false; } for (var shape of shapes) { shape.display(); } }