varia
/
voicegardens
14
0
Fork 0
Code Issues Releases Activity
Browse Source

Add buttons for audio handling

main
Luke Murphy 5 years ago
parent
c6c8cc3f03
commit
cae45df542
No known key found for this signature in database GPG Key ID: 5E2EF5A63E3718CC
3 changed files with 88 additions and 14 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      vocoder/server.py
  2. 84
      vocoder/static/vocoder.js
  3. 4
      vocoder/templates/index.html

14
vocoder/server.py
View File

@ -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 = Flask(__name__)
@app.route("/") @app.route("/")
def root(): def root():
"""Serve the main homepage."""
return render_template("index.html") 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)

84
vocoder/static/vocoder.js
View File

@ -1,15 +1,81 @@
//
// Vocoder front-end Javascript // 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. // TODO: Read this from the environment so it can run propoerly
// This includes images (our map tiles), see https://stackoverflow.com/a/1033448 // depending on whether it is in development or production mode
window.addEventListener('load', main) var serverUrl = 'http://localhost:5000';
var archiveUrl = serverUrl + '/add-to-archive/';
function main(){ function setupRecording(){
const mappa = new Mappa('Leaflet'); var mic, recorder, soundFile;
// TODO: once we get the leaflet map setup, we'll overlay following var state = 0;
// the example from https://mappa.js.org/docs/examples-leaflet.html
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(){} function draw(){}

4
vocoder/templates/index.html
View File

@ -3,12 +3,10 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width" /> <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"> <link rel="stylesheet" href="/static/leaflet/leaflet.css" type="text/css" media="screen" title="leaflet" charset="utf-8">
</head> </head>
<body> <body>
Coming Soon TM.
<script src="/static/leaflet/leaflet-src.js" charset="utf-8"></script> <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/mappajs/mappa.min.js" charset="utf-8"></script>
<script src="/static/p5js/p5.min.js" charset="utf-8"></script> <script src="/static/p5js/p5.min.js" charset="utf-8"></script>

Write Preview
Loading…
Cancel
Save