Connect audio input to web patch

[pingdynasty]

make web generates a patch.js file which is controlled from WebSources/patch.html. We need to connect an audio input to the dsp process. The user should have a choice of preset WAVs to use as input (looping). Would be nice to also be able to connect the mic/line.

The webaudio.js implementation is based on this: http://thealphanerd.io/blog/from-faust-to-webaudio/

There is a connect method but I'm not sure how the AudioContext works.

This might be useful http://typedarray.org/from-microphone-to-wav-with-getusermedia-and-web-audio/

[sam-artuso]

• What tools do I need to be able to run make web on my computer?
• How do I specify the patch?

[sam-artuso]

Current output:

$ make web
Building patch Template
echo '.string "'"Template"'"' > ./Build/progname.s
echo "#include \""Template"Patch.hpp\"" > ./Build/patch.h
echo "REGISTER_PATCH("Template"Patch, \""Template"\", 2, 2);" > ./Build/patch.cpp
emcc -fno-rtti -fno-exceptions  -IOwlPatches -ISource -IPatchSource -ILibSource -IBuild -ITestPatches -s EXPORTED_FUNCTIONS="['_WEB_setup','_WEB_setParameter','_WEB_processBlock','_WEB_getPatchName','_WEB_getParameterName','_WEB_getMessage','_WEB_getStatus']" Source/PatchProgram.cpp Source/PatchProcessor.cpp WebSource/web.cpp Source/operators.cpp Source/message.cpp LibSource/StompBox.cpp LibSource/basicmaths.c    -o Build/patch.js
In file included from Source/PatchProgram.cpp:8:
LibSource/FastFourierTransform.h:38:10: fatal error: 'kiss_fft.h' file not found
#include "kiss_fft.h"
         ^
1 error generated.
ERROR    root: compiler frontend failed to generate LLVM bitcode, halting
make: *** [web] Error 1

Emscripten version:

$ emcc --version | head -n1
emcc (Emscripten GCC-like replacement) 1.10.0 ()

[pingdynasty]

I've pushed an update, pls try again.

By default, make web compiles TemplatePatch which doesn't do anything. To compile any other patch FooPatch, drop the source into PatchSource and make PATCHNAME=Foo web

You can also download OwlPatches [1] to the OwlProgram folder, then e.g. make PATCHNAME=TestTone. The build script will look for the files in the OwlPatches folder, if there is one.

You will need to install emcc: sudo apt-get install emscripten.

[1] https://github.com/pingdynasty/OwlPatches

[pingdynasty]

never mind, you've got emcc already! 1.10.0 is fine.

[pingdynasty]

Updated readme with instructions: https://github.com/pingdynasty/OwlProgram

There's an additional target: make online, which mimics the previous behaviour to work with the online compiler.

[smrq]

I was playing around with this and I got mic and file input working. The UI sure needs some work, but I tried it with the basic tremolo patch and it works great!

smrq/OwlProgram#web-audio

Also note that mic input might be blocked by your browser if you are running from the file:// protocol. I personally just used a tiny Node.js static file server to run off of localhost:3000. I think there's a command-line flag for Chrome at least to allow that sort of thing off of the file:// protocol.

[pingdynasty]

that's awesome - works a treat!

On 27/07/15 23:43, Greg Smith wrote:

I was playing around with this and I got mic and file input working. The UI sure needs some work, but I tried it with the basic tremolo patch and it works great!

smrq/OwlProgram#web-audio https://github.com/smrq/OwlProgram/tree/web-audio

— Reply to this email directly or view it on GitHub https://github.com/pingdynasty/OwlProgram/issues/15#issuecomment-125370654.

[pingdynasty]

I've merged that into master, thanks @smrq !

[sam-artuso]

I compiled Contest/BitH8r with this commands:

cd /tmp
mkdir build src
cd src
wget https://raw.githubusercontent.com/pingdynasty/OwlPatches/master/Contest/BitH8rPatch.hpp
cd /opt/OwlProgram.online
make BUILD='/tmp/build' PATCHSOURCE='/tmp/src' PATCHNAME='Contest/BitH8r' PATCHIN=2 PATCHOUT=2 PATCHFILE='BitH8rPatch.hpp' PATCHCLASS='BitH8rPatch' web

make exited with status 0 and I found these files in /tmp/build: patch.cpp, patch.h and patch.js. The last one is a 410K JavaScript file. Is this right? Is this the file we are supposed to load into the browser?

[sam-artuso]

Also, I'm not sure how to go about compiling Faust and PureData patches to JavaScript. All my attempts have failed so far. Help?

[ghost]

yes, if you open the file WebSource/patch.html in Chrome it should load. You might have to adjust the path to patch.js.

Martin

On 25/08/15 20:14, Sam Artuso wrote:

I compiled |Contest/BitH8r| with this commands:

cd /tmp mkdir build src cd src https://raw.githubusercontent.com/pingdynasty/OwlPatches/master/Contest/BitH8rPatch.hpp cd /opt/OwlProgram.online make BUILD='/tmp/build' PATCHSOURCE='/tmp/src' PATCHNAME='Contest/BitH8r' PATCHIN=2 PATCHOUT=2 PATCHFILE='BitH8rPatch.hpp' PATCHCLASS='BitH8rPatch' web

|make| exited with status |0| and I found these files in |/tmp/build|: |patch.cpp|, |patch.h| and |patch.js|. The last one is a 410K JavaScript file. Is this right? Is this the file we are supposed to load into the browser?

— Reply to this email directly or view it on GitHub https://github.com/pingdynasty/OwlProgram/issues/15#issuecomment-134705706.

[sam-artuso]

Is there an option to minify the JavaScript?

[ghost]

No but we could add it to the makefile. What's a good commandline minifyer?

I've pushed some changes to master: I merged in the wavyjones branch, which adds an audio waveform viewer. You can remove it if you don't want to use it, its not important.

[ghost]

Faust to web: should be exactly the same, just replace sysex with web. Just tested with make PATCHSOURCE=OwlPatches/Faust FAUST=HarpAuto web, and a couple of others, works for me.

The build now copies patch.html and anything else that's in WebSource over to Build, so you can simply open Build/patch.html and it should run. Only patch.js is dynamically generated.

PD to web is not working atm, will try to fix.

[ghost]

Pushed some more changes to get PD->web to work. Works for me:

make clean
make PATCHSOURCE=OWL-Heavy_Pure-Data-patches HEAVY=HeavyOwl heavy web
make PATCHSOURCE=OWL-Heavy_Pure-Data-patches HEAVY=HeavyOwl heavy web

Note: I've updated the Makefile so that the token is only passed through to the uploader if HEAVYTOKEN is defined. This way it still prompts for ordinary use.

[sam-artuso]

No but we could add it to the makefile. What's a good commandline minifyer?

The best minifier is probably Google's Closure compiler. I've installed it on our servers and here's how to use it:

java -jar /usr/local/lib/node_modules/google-closure-compiler/compiler.jar --js_output_file=out.js patch.js

It managed to shrink patch.js from 410 to 168 K (-60%!).

[ghost]

ok, I'll add that to the build tomorrow. 160Kb is still quite big, no? What do you think about adding gzip to Apache? Compressing the original js might be smaller than compressing the minified js. I'll try it out.

[giuliomoro]

In the README here there is a comparison of performances of a few minifiers https://github.com/mishoo/UglifyJS

[ghost]

min: closure compiler Version: v20150729 closure: closure compiler Version: 20130227

size      file
323701    Build/patch.js
146419    Build/patch.min.js
146384    Build/patch.closure.js
76435     Build/patch.js.gz
43131     Build/patch.min.js.gz
43207     Build/patch.closure.js.gz

tldr; minify with latest closure compiler then gzip for best compression

@samuele-artuso do you want me to gzip the js in the makefile?

We can set Apache up to gzip on the fly, but you might want to store the compressed file in the database to save space - what do you think?

[ghost]

I've pushed a Makefile with a minify target, which expects Tools/Closure/compiler.jar. I've not added compiler.jar to git, pls copy it from your installation. Minifying spits out loads of warnings about the emcc-generated code. So far it seems the patches I've tried work fine in minified form.

[sam-artuso]

After gzipping, with the a few patches I tested, UglifyJS makes files only 2-3% larger than Google Closure, but a lot faster. Here are the results of my tests. Google Closure's average time is 22 secs, worst time is 30 secs. UglifyJS's average time is 1.8 secs, worst time is 2.5 secs.

So I suggest using UglifyJS, instead. I've changed the Makefile so that it uses it (69aa390). If for any reason you want to stick to Closure, it's just a matter of commenting/uncommenting 2 lines.

I've installed both minifiers under Tools/, using npm. To install them locally, just run:

cd Tools
npm install google-closure-compiler uglifyjs

[sam-artuso]

@pingdynasty: ehm... I think I broke the minify target, even though I don't understand how.

$ make BUILD='/tmp/owl-build-gP7btY' PATCHSOURCE='/tmp/owl-src-z0B0AR' PATCHNAME='Faust/SmoothDelay' PATCHIN=1 PATCHOUT=1 FAUST='SmoothDelay' PATCHFILE='SmoothDelayPatch.hpp' PATCHCLASS='SmoothDelayPatch' minify
make: *** No rule to make target `/tmp/owl-build-JJGA3W/patch.js', needed by `minify'.  Stop.

Could you take a look?

[ghost]

you didn't break it. I've fixed the dependencies so this now works - I've also changed it to put web related output into Build/web/

On 27/08/15 22:48, Sam Artuso wrote:

@pingdynasty https://github.com/pingdynasty: ehm... I think I broke the |minify| target, even though I don't understand how.

|$ make BUILD='/tmp/owl-build-gP7btY' PATCHSOURCE='/tmp/owl-src-z0B0AR' PATCHNAME='Faust/SmoothDelay' PATCHIN=1 PATCHOUT=1 FAUST='SmoothDelay' PATCHFILE='SmoothDelayPatch.hpp' PATCHCLASS='SmoothDelayPatch' minify make: *\ No rule to make target /tmp/owl-build-JJGA3W/patch.js', needed byminify'. Stop. |

Could you take a look?

— Reply to this email directly or view it on GitHub https://github.com/pingdynasty/OwlProgram/issues/15#issuecomment-135565124.

[sam-artuso]

Thanks for that. I need patch.min.js to be built inside the $BUILD directory I specify though. Is this possible? Apart from keeping my code simpler, I think it would make the build process race-condition safe.

To be clear, this is the error my patch builder is yielding:

Unable to move /tmp/owl-build-otF2bO/patch.min.js to /var/www/hoxtonowl.com/subdomains/www/patch-builder/build-js/.

[sam-artuso]

Error:

$ make BUILD='/tmp/owl-build-OFBpg9' PATCHSOURCE='/tmp/owl-src-uX3tAO' PATCHNAME='Faust/SmoothDelay' PATCHIN=1 PATCHOUT=1 FAUST='SmoothDelay' PATCHFILE='SmoothDelayPatch.hpp' PATCHCLASS='SmoothDelayPatch' minify
Building patch Faust/SmoothDelay
/bin/sh: /tmp/owl-build-OFBpg9/patch.cpp: No such file or directory
make: *** [/tmp/owl-build-OFBpg9/patch.cpp] Error 1

You can try it yourself, I've left my temp directories on the server:

$ ls /tmp/owl-*
/tmp/owl-build-5DhnY5:

/tmp/owl-src-tH8eET:
SmoothDelay.dsp

[sam-artuso]

Apache Gzip compression enabled for all HTML, CSS and JS content.

[pingdynasty]

on nestor?

I had to chmod a+rx /tmp/owl-src-tH8eET/

then I get emcc errors - works if I run it as you though:

make BUILD='/tmp/b' PATCHSOURCE='/tmp/owl-src-tH8eET'
PATCHNAME='Faust/SmoothDelay' PATCHIN=1 PATCHOUT=1 FAUST='SmoothDelay'
PATCHFILE='SmoothDelayPatch.hpp' PATCHCLASS='SmoothDelayPatch' minify