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:

MDN Web Audio API: