Choose a country to see content specific to your location

Skip to main content

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

Published on April 14th 2020

by tom.hicks. All rights reserved

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.
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)
14observer.observe(document, {
15 attributes: true,
16 childList: true,
17 subtree: true,
18 characterData: true,

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!

Love gardens? Sign up for Candide’s Almanac!

A weekly edit of freshly picked gardening tips, travel guides, and the best botanical days out happening near you. Unsubscribe at any time.



About usCareersPrivacy policy

Candide is your guide to visiting UK public gardens. Find the best gardens, buy tickets and enter with just your phone. Download the app for offline tickets, community access and more.

Terms & ConditionsCode of Conduct

© 2022 Candide

Made in Bristol