varia/voicegardens
14
0
Fork 0
Code Issues Releases Activity

Add buttons for audio handling

Browse Source
This commit is contained in:
Luke Murphy 2019-12-16 21:19:26 +07:00
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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.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)

84
vocoder/static/vocoder.js
View File

@ -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(){}

4
vocoder/templates/index.html
View File

@ -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>