Pre-Alpha-MVP: HTML5/laptop-microphone solution

[mk4111]

Having had a few discussions around what range of frequencies we want to be able to capture and why (see #7), it's become clear that we really need to start with a simple solution, get the results from that and only then figure out what the best 'next steps' might be; i.e. the agile approach!!

So as @nelsonic mentioned in #7:

As a "Pre-Alpha-MVP" it might be an idea to do this using HTML5 and the Microphone on a Cheap 2nd Hand Chromebook instead of a RaspberryPi/Arduino ... @jasonpecor appears to have attempted this: https://github.com/jasonpecor/DecibelMeter so we might be able to get some pointers from his work... however jasonpecor/DecibelMeter#6 so... might need some work...

The repo is great as a starting point, and I think could perhaps be improved by having a quick google of the HTML5 Audio API and summarise what it can/can't do, and see how we can use that with the default microphone in our laptop.

[nelsonic]

@mk4111 HTML5 Audio API is a great place to start! 💡

[mk4111]

Hi @nelsonic - I've had some play around with the HTML5 Web Audio API and feel that I'm now more able to time estimate this part of the project.

Time estimate (1 person)

We need:

Consumer facing interface (~ 0.5 days)

• [ ] Create simple HTML5 page:
  • [ ] 'Start' button to start input/listening (and to start saving data?) (~25min)
  • [ ] Display dB measurement at any specific time or above a certain threshold? Value or graphical display? For a graphical display, (e.g. volume vs. time or volume vs. frequency) we'd need something like a 2D canvas. (up to 2hours?)
• [ ] How much CSS?

Data Capturing + Processing (~ 3 days)

• [ ] On click of 'Start' we want to connect to the microphone --> navigator.getUserMedia
• [ ] navigator.getUserMedia takes 3 arguments; one of which is a function:
  • [ ] Define an audio stream input (createMediaStreamSource)
  • [ ] Define an Analyser node (createAnalyser)
• [ ] Define Audio Processor node (createScriptProcessor --> buffer size? Need to research)
  • [ ] Pass (buffer) data from input stream to processor node
  • [ ] Process it: stack it, and produce an 'average' volume
  • [ ] Define a volume limit/threshold.

Data Storage (~ 2 days)

• [ ] On click of 'Start', we also need to start saving data:
  • [ ] Create DB instance or save to spreadsheet?
  • [ ] (Assuming we save raw input) Store frequency-stacked audio input, so volume (of all frequencies) at a specific time.

Thoughts:

Having had a really quick run through of how to get stuff working with Web Audio API, there are a few things that have come to mind, that probably need some tinkin' and tinkerin'.

• [ ] Testing... How?
• [ ] Need to check that the 'volume' we're detecting is actually in the units of dB, so needs a wee more reading.
• [ ] How do we want to notify people that the sound is beyond the limit? Is some sort of remark on a simple HTML page enough for this stage? Or do we want some buzzer to go off/change in lights (probably a bit more hands on with the breadboard, thus more advanced/more time)
• [ ] What should the sound threshold? (Need to find out microphone frequency range but) on microphone mute, value = 0; when very silent averages around 30dB (assuming units are correct)
• [ ] At this stage I've assumed no frequency filtering or weighting, so all frequencies captured will just be stacked together (which isn't actually that great) --> Should we apply filtering/weighting at this stage or not? This brings us back to #7
• [ ] Do we want a 'Stop' button, or are we happy to stop detecting noise by closing the browser?
• [ ] Do we want to store sound data? If so, do we want to store audio or just dB? How frequently do we want to store this? e.g. every time we hit a new max/min, or an average over every 5 mins, or just raw data? What specifically do we want to store (e.g. dB, frequency, stacked frequency, time, day, etc.) - is a relational database going to make it easier for data analysis or will redis do the job just as well too?
• [ ] How do we want to 'error' --> e.g. if microphone cannot be detected

[nelsonic]

@mk4111 thoughts estimates sound good. go for it! ❤️ ✅ 🙉

[mk4111]

@nelsonic yippeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee!!! :heart: :heart: :heart: Thank you