Add buttons for audio handling

4 years ago · cae45df542
3 changed files with 88 additions and 14 deletions
--- a/vocoder/server.py
+++ b/vocoder/server.py
@ -1,10 +1,20 @@
-"""Flask server for the Vocoder back-end."""
+"""Flask server for the vocoder back-end."""

-from flask import Flask, render_template
+from flask import Flask, render_template, request

 app = Flask(__name__)


@app.route("/")
 def root():
+    """Serve the main homepage."""
    return render_template("index.html")
+
+
+@app.route("/add-to-archive/", methods=["POST"])
+def add_to_archive():
+    """Accept audio recordings for archiving."""
+    # TODO: implement the saving of the files currently,
+    # I can't seem to get the file to send but the basic
+    # plumbing is in place
+    return ("faking it till we make it", 201)
--- a/vocoder/static/vocoder.js
+++ b/vocoder/static/vocoder.js
@ -1,15 +1,81 @@
+//
 // Vocoder front-end Javascript
+//
+// https://learnxinyminutes.com/docs/javascript/
+// https://developer.mozilla.org/en-US/docs/web/javascript/reference
+//

-// Only run our JS when everything on the page is loaded.
-// This includes images (our map tiles), see https://stackoverflow.com/a/1033448
-window.addEventListener('load', main)
+// 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/';

-function main(){
-  const mappa = new Mappa('Leaflet');
-  // TODO: once we get the leaflet map setup, we'll overlay following
-  // the example from https://mappa.js.org/docs/examples-leaflet.html
+function setupRecording(){
+  var mic, recorder, soundFile;
+  var state = 0;
+
+  mic = new p5.AudioIn();
+  mic.start();
+  recorder = new p5.SoundRecorder();
+  recorder.setInput(mic);
+  soundFile = new p5.SoundFile();
+
+  function doRecording(){
+    // TODO: handle timing out if no stopping happens
+    if (mic.enabled){
+      recorder.record(soundFile);
+    }
+  };
+
+  function doStopping(){
+    // TODO: only stop if playing/recording otherwise:
+    // "NotSupportedError: Operation is not supported"
+    recorder.stop();
+  };
+
+  function doPlaying(){
+    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, 10);
+  recordButton.mousePressed(doRecording);
+
+  stopButton = createButton('stop');
+  stopButton.position(120, 10);
+  stopButton.mousePressed(doStopping);
+
+  playButton = createButton('play');
+  playButton.position(210, 10);
+  playButton.mousePressed(doPlaying);
+
+  playButton = createButton('archive');
+  playButton.position(300, 10);
+  playButton.mousePressed(doArchiving);
+}
+
+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();
 }

-// TODO: p5.js / mappa.js specifics for later ...
-function setup(){}
 function draw(){}
--- a/vocoder/templates/index.html
+++ b/vocoder/templates/index.html
@ -3,12 +3,10 @@
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
-    <title>Vocoder.org</title>
+    <title>vocoder.org</title>
    <link rel="stylesheet" href="/static/leaflet/leaflet.css" type="text/css" media="screen" title="leaflet" charset="utf-8">
  </head>
  <body>
-    Coming Soon TM.
-
    <script src="/static/leaflet/leaflet-src.js" charset="utf-8"></script>
    <script src="/static/mappajs/mappa.min.js" charset="utf-8"></script>
    <script src="/static/p5js/p5.min.js" charset="utf-8"></script>