Want to make your UIs sound like they do in the movies? Use this code snippet!

tom.hicks
Published on April 14th 2020
1
Headphones and a clapperboard
You know how in Hollywood films and TV shows that all computer interfaces bleep and bloop with every single thing that changes on screen?
I decided to try and make that a reality in a recent hack day.
By using the AudioContext and DOM MutationObserver APIs, this snippet, when pasted into your console, will little tinky sounds, with the pitch varying with how many elements change on screen.
1
2const audioCtx = new (window.AudioContext || window.webkitAudioContext)()
3const observer = new MutationObserver(function(mutationsList) {
4 const oscillator = audioCtx.createOscillator()
5 oscillator.connect(audioCtx.destination)
6 oscillator.type = "sine"
7 oscillator.frequency.setValueAtTime(
8 Math.log(mutationsList.length + 5) * 880,
9 audioCtx.currentTime,
10 )
11 oscillator.start()
12 oscillator.stop(audioCtx.currentTime + 0.01)
13})
14observer.observe(document, {
15 attributes: true,
16 childList: true,
17 subtree: true,
18 characterData: true,
19})

As a debugging tool

I found out afterwards that it has some interesting uses for debugging and understanding your web pages.
For instance, I found out that the Twitter web app mutates element classes to produce hover effects, rather than using hover CSS selectors. You can hear the little *tink* when you hover or mouseout on buttons, which lets you know that the DOM is changing. Other websites that use hover selectors are silent.
You can also hear the performance characteristics of certain screens. For instance, you can hear how many items are changing when you are using an autocomplete field on some search widgets. Less *tinking* means fewer DOM updates.
And I also discovered that LastPass renders something on the page every second or so on a credentials screen. No idea what it is doing, but you can hear it tinking away, and if you disable the LastPass Chrome extension, it stops!

Try it yourself

I put the code in a gist, and someone made a Chrome extension.
Oh, and someone suggested making it make sounds for network activity, but I'll leave that as an exercise for the reader!
Free download for your phone or tablet
Download on the App StoreGet it on Google Play

Lots to see

Follow and read AlanGardenMaster’s articles as he develops his new one-acre plot. PimlicoDan shows city gardening in a whole new light, or follow DaisyDays on her adventures in the allotment and as a professional gardener. Just a few of the many personalities you’ll meet in our app. Free download for your phone or tablet.
Download on the App StoreGet it on Google Play