SVG Decibel Meter - Arctic Monkeys AM
I thought I would try an animated album cover.
The effect here is pretty simple, we’re just changing the stroke-width of the SVG and background of the <body>. The trick was getting the Web Audio API to give back the decibel level.
Luckily Chris Wilson has a brilliant little plugin to work with it and I was able to get the decibel level incredibly easily. And the code is tiny! It’s only about ~60 lines! Great for learning the very basics of what can be a complicated API to start out with!
Chris Wilson’s Volume Meter: https://webaudiodemos.appspot.com/volume-meter/
MDN Web Audio API: https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API