Building a PWA for my son's Chromebook; Part 2: Audio API's

People always told me I had a “loud voice”, and my son’s loud callouts during quarantine are also trying the adults in the house. To learn more about volume and intensity, I tried to build a Progressive Web App (PWA) that monitors your volume.
Inspired by Nadieh Bremer’s use of the Web Audio API and tutorials on the Web Audio API

Files: Input Element, Capture Attribute

Can use the <audio> element with the capture attribute. This was too simplistic for my needs.

Stream: Access the Micropohone Interactively

Calling the navigator.mediaDevices.getUserMedia() function prompts the user to use their microphone.

The stream can be:

Example calls:

Processing: Handle the Stream with AudioContext

The Web Audio API is a simple API that takes input sources and connects those sources to nodes which can process the audio data (adjust Gain etc.) and ultimately to a speaker so that the user can hear it.

Analyzing: AnalyserNode (British spelling!)

As seen in this answer

You can also use an AnalyserNode to do the level detection, and just average out the data, kind of like what the above answer does in getAverageVolume. However, the above answer is NOT a good use of ScriptProcessor - in fact, it’s doing no processing of the script node at all, not even passing the data through, it’s just using it like a timer callback. You would be FAR better served by using requestAnimationFrame as the visual callback;

The ScriptProcessor/createScriptProcessor is deprecated, but the AnalyserNode is not! The AnalyserNode helps us: TODO: img https://mdn.mozillademos.org/files/12970/fttaudiodata_en.svg AnalyserNode.fftSize

Let’s see if we can use the AnalyserNode.

I continued using Glitch (where I developed the PWA) to get the getAverageVolume code running

I removed createScriptProcessor and the resulting javascriptNode. I connected the AnalyserNode directly to the audioContext.destination;

analyser.connect(audioContext.destionation)
// javascriptNode.connect(audioContext.destination);