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!
Firstly, the script creates an Audio Context, which the browser will use to create audio on the fly.
10const audioCtx = new AudioContext()
Then, it makes a Mutation Observer!
11const observer = new MutationObserver(..
The Mutation Observer will call its callback every time a mutation happens within its applied elements. In this script, you can see those elements defined in the final lines.
25observer.observe(document, {
26 attributes: true,
27 childList: true,
28 subtree: true,
29 characterData: true,
30})
Here, it applies to document (the whole webpage) and will trigger when any of attributes, childList, subTree & characterData properties change… which covers pretty much any change.
The final block of code manages the creation of the audio.
12const oscillator = audioCtx.createOscillator()
13
14oscillator.connect(audioCtx.destination)
15oscillator.type = "sine"
16oscillator.frequency.setValueAtTime(
17 Math.log(mutationsList.length + 5) * 880,
18 audioCtx.currentTime,
19)
20
21oscillator.start()
22oscillator.stop(audioCtx.currentTime + 0.01)
The oscillator is responsible for creating the wave form (as in sound wave). Its type is set to be sine, which is a smoother more natural noise.
The oscillator’s frequency is set based on how many mutations are observed (higher if there are more). Then the start and stop functions are called within a very tight timeframe, meaning you’ll hear the initial plink and plonk that the script is named from.
The gist thread is well worth reading as well, people have gotten creative and made a lot of small adaptions to suit their own wants and needs!