add volume "level" indicator to demo

[jywarren]

to help in debugging -- it's good to see that, for example, something blinks when it hears anything. Maybe we can just include an existing module for this, and/or blink just one dot called "Volume" or "Sound detected"?

Here's one that's really helpful:

[jywarren]

Could also link to https://test.webrtc.org/

[rmeister]

That's an excellent idea, and maybe I can incorporate parts of it into a first-timer-only issue?

[jywarren]

sure! Good idea, though maybe a help-wanted issue as a FTO issue should be something you can spell out in a series of concrete steps. But if you think it'll be that easy, go for it!

[jywarren]

If you could point at a line in the decoder where there's a way to listen or query for activity -- it could just be a place to listen for a 1 or 0, instead of actually listening for volume -- that'd be really helpful -- could this line where state is changed to DATA work?

https://github.com/publiclab/webjack/blob/master/src/decoder.js#L178

[rmeister]

Hm do we really want this stuff inside the code?

Maybe we can use this example, but only in the code of the demo site: https://webaudiodemos.appspot.com/volume-meter/index.html

[jywarren]

Agreed, this should be in the demo code, and can be pretty much separate from core WebJack.

[jywarren]

I like https://webaudiodemos.appspot.com/volume-meter/ !!!

The code for it is here -- quite simple and we can probably strip some out for simplicity:

https://github.com/cwilso/volume-meter/blob/master/main.js

[jywarren]

Update! I made a https://p5js.org sketch of an equalizer -- you can also hover your mouse to see the frequency:

https://editor.p5js.org/jywarren/sketches/TsICFM5ZO

It embeds, though maybe we'd need to run it from within the demo for cross- domain security reasons?

<iframe src="https://editor.p5js.org/jywarren/embed/TsICFM5ZO" style="border:0;width:100%;height:400px;"></iframe>

Open in a new window here: https://editor.p5js.org/jywarren/full/TsICFM5ZO

I tuned it with this frequency generator: https://marcgg.com/blog/2016/11/01/javascript-audio/

[jywarren]

[jywarren]

I think i got this working!

[jywarren]

I'll leave this open, because we could later expand the frequency range to include browser frequencies of 20,000Hz:

https://github.com/publiclab/webjack#profiles

I can't see how we can set the range the FFT p5JS plugin monitors using options here:

https://p5js.org/reference/#/p5.FFT https://p5js.org/reference/#/p5.FFT/analyze

But perhaps we could propose an upstream change to set the range of the FFT -- building on this issue:

https://github.com/processing/p5.js-sound/issues/353

[jywarren]

Done!!!