SVG Decibel Meter - Arctic Monkeys AM

ep005 - Feb 1, 2019

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!

Codepen: https://codepen.io/loficodes/pen/exZyzm

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