|
@ -7,72 +7,72 @@ |
|
|
|
|
|
|
|
|
// TODO: Read this from the environment so it can run propoerly
|
|
|
// TODO: Read this from the environment so it can run propoerly
|
|
|
// depending on whether it is in development or production mode
|
|
|
// depending on whether it is in development or production mode
|
|
|
var serverUrl = 'http://localhost:5000'; |
|
|
var serverUrl = 'http://localhost:5000' |
|
|
var archiveUrl = serverUrl + '/add-to-archive/'; |
|
|
var archiveUrl = serverUrl + '/add-to-archive/' |
|
|
|
|
|
|
|
|
var mic, recorder, soundFile; |
|
|
var mic, recorder, soundFile |
|
|
var recordingTimeout = 30000; // 30 seconds (in milliseconds)
|
|
|
var recordingTimeout = 30000 // 30 seconds (in milliseconds)
|
|
|
var shouldGenerateNewShape = false; |
|
|
var shouldGenerateNewShape = false |
|
|
|
|
|
|
|
|
function setupRecording(){ |
|
|
function setupRecording(){ |
|
|
mic = new p5.AudioIn(); |
|
|
mic = new p5.AudioIn() |
|
|
mic.start(); |
|
|
mic.start() |
|
|
|
|
|
|
|
|
recorder = new p5.SoundRecorder(); |
|
|
recorder = new p5.SoundRecorder() |
|
|
recorder.setInput(mic); |
|
|
recorder.setInput(mic) |
|
|
|
|
|
|
|
|
soundFile = new p5.SoundFile(); |
|
|
soundFile = new p5.SoundFile() |
|
|
|
|
|
|
|
|
function doRecording(){ |
|
|
function doRecording(){ |
|
|
if (mic.enabled){ |
|
|
if (mic.enabled){ |
|
|
setTimeout(recorder.record(soundFile), recordingTimeout); |
|
|
setTimeout(recorder.record(soundFile), recordingTimeout) |
|
|
} |
|
|
} |
|
|
}; |
|
|
} |
|
|
|
|
|
|
|
|
function doStopping(){ |
|
|
function doStopping(){ |
|
|
if (recorder.recording) { |
|
|
if (recorder.recording) { |
|
|
recorder.stop(); |
|
|
recorder.stop() |
|
|
shouldGenerateNewShape = true; |
|
|
shouldGenerateNewShape = true |
|
|
} |
|
|
} |
|
|
}; |
|
|
} |
|
|
|
|
|
|
|
|
function doPlaying(){ |
|
|
function doPlaying(){ |
|
|
if (soundFile.isLoaded()){ |
|
|
if (soundFile.isLoaded()){ |
|
|
soundFile.play(); |
|
|
soundFile.play() |
|
|
} |
|
|
} |
|
|
}; |
|
|
} |
|
|
|
|
|
|
|
|
function doArchiving(){ |
|
|
function doArchiving(){ |
|
|
var soundBlob = soundFile.getBlob(); |
|
|
var soundBlob = soundFile.getBlob() |
|
|
|
|
|
|
|
|
var httpRequestOptions = { |
|
|
var httpRequestOptions = { |
|
|
method: 'POST', |
|
|
method: 'POST', |
|
|
body: new FormData().append('soundBlob', soundBlob), |
|
|
body: new FormData().append('soundBlob', soundBlob), |
|
|
headers: new Headers({enctype: 'multipart/form-data'}) |
|
|
headers: new Headers({enctype: 'multipart/form-data'}) |
|
|
}; |
|
|
} |
|
|
|
|
|
|
|
|
// TODO: do error handling when things fail
|
|
|
// TODO: do error handling when things fail
|
|
|
// TODO: this doesn't actually work right now
|
|
|
// TODO: this doesn't actually work right now
|
|
|
httpDo(archiveUrl, httpRequestOptions); |
|
|
httpDo(archiveUrl, httpRequestOptions) |
|
|
}; |
|
|
} |
|
|
|
|
|
|
|
|
// TODO: we'll probably want something more glam than
|
|
|
// TODO: we'll probably want something more glam than
|
|
|
// some default buttons but that's fine for experimenting
|
|
|
// some default buttons but that's fine for experimenting
|
|
|
recordButton = createButton('record'); |
|
|
recordButton = createButton('record') |
|
|
recordButton.position(10, 90); |
|
|
recordButton.position(10, 90) |
|
|
recordButton.mousePressed(doRecording); |
|
|
recordButton.mousePressed(doRecording) |
|
|
|
|
|
|
|
|
stopButton = createButton('stop'); |
|
|
stopButton = createButton('stop') |
|
|
stopButton.position(120, 90); |
|
|
stopButton.position(120, 90) |
|
|
stopButton.mousePressed(doStopping); |
|
|
stopButton.mousePressed(doStopping) |
|
|
|
|
|
|
|
|
playButton = createButton('play'); |
|
|
playButton = createButton('play') |
|
|
playButton.position(210, 90); |
|
|
playButton.position(210, 90) |
|
|
playButton.mousePressed(doPlaying); |
|
|
playButton.mousePressed(doPlaying) |
|
|
|
|
|
|
|
|
playButton = createButton('archive'); |
|
|
playButton = createButton('archive') |
|
|
playButton.position(300, 90); |
|
|
playButton.position(300, 90) |
|
|
playButton.mousePressed(doArchiving); |
|
|
playButton.mousePressed(doArchiving) |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function collectSoundParamters(){ |
|
|
function collectSoundParamters(){ |
|
@ -84,27 +84,27 @@ function collectSoundParamters(){ |
|
|
// btw, there is no "nuance" function for p5js. My current guess is to
|
|
|
// btw, there is no "nuance" function for p5js. My current guess is to
|
|
|
// perhaps measure it from the "getPeaks". For all wave peaks measured,
|
|
|
// perhaps measure it from the "getPeaks". For all wave peaks measured,
|
|
|
// ??? (need to think this through, not really sure ...)
|
|
|
// ??? (need to think this through, not really sure ...)
|
|
|
amplitude = soundFile.getPeaks(); |
|
|
amplitude = soundFile.getPeaks() |
|
|
duration = soundFile.duration(); |
|
|
duration = soundFile.duration() |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function generateShape(){ |
|
|
function generateShape(){ |
|
|
// TODO: take in sound parameters and generate a shape
|
|
|
// TODO: take in sound parameters and generate a shape
|
|
|
ellipse(100, 100, 25, 25); |
|
|
ellipse(100, 100, 25, 25) |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function setup(){ |
|
|
function setup(){ |
|
|
// TODO: Replace this with the leaflet/mappa setup just
|
|
|
// TODO: Replace this with the leaflet/mappa setup just
|
|
|
// using this for now to draw something to experiment on
|
|
|
// using this for now to draw something to experiment on
|
|
|
createCanvas(600, 600); |
|
|
createCanvas(600, 600) |
|
|
|
|
|
|
|
|
setupRecording(); |
|
|
setupRecording() |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function draw(){ |
|
|
function draw(){ |
|
|
if (shouldGenerateNewShape){ |
|
|
if (shouldGenerateNewShape){ |
|
|
collectSoundParamters(); |
|
|
collectSoundParamters() |
|
|
generateShape(); |
|
|
generateShape() |
|
|
shouldGenerateNewShape = false; |
|
|
shouldGenerateNewShape = false |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|