Beep beep bloop bloop - Listen to your webpage in action!
Debugging tools are better than ever, but some things still remain hidden to the un-observant eye… this small script is a delightful way to hear what webpages are doing behind the scenes.
Accurately named plink-plonk.js by developer Tom Hicks, this small snippet of JavaScript is a clever and simple way to create sounds from the browser whenever the webpage you’re on modifies itself in any way. (For single-page apps, this will be a lot!)
The script is activated by pasting it into your console (not always the best idea, if you can’t understand all the code). Here’s a quick video of it in action:
Beep beep bloop bloop - Listen to your webpage load /w this nifty script by @hicksyfern - https://t.co/2AcR7DTJBr pic.twitter.com/V9DkagWmts
— The Indie Web (@the_indie_web) February 27, 2020
The simplicity of the script, is based in both the power of the Web Audio API and the Mutation Observer API.
So how does this work? Lets break it down!
Explain it to me