Skip to content

Instantly share code, notes, and snippets.

@zerobias
Created February 15, 2020 22:05
Show Gist options
  • Save zerobias/7fe88fbf19cd48c65bcf250575035f7b to your computer and use it in GitHub Desktop.
Save zerobias/7fe88fbf19cd48c65bcf250575035f7b to your computer and use it in GitHub Desktop.
Hear DOM changes with WebAudio API
/*
Copy this into the console of any web page that is interactive and doesn't
do hard reloads. You will hear your DOM changes as different pitches of
audio.
I have found this interesting for debugging, but also fun to hear web pages
render like UIs do in movies.
*/
const audioCtx = new (window.AudioContext || window.webkitAudioContext)()
const observer = new MutationObserver(function(mutationsList) {
const oscillator = audioCtx.createOscillator()
oscillator.connect(audioCtx.destination)
oscillator.type = "sine"
oscillator.frequency.setValueAtTime(
Math.log(mutationsList.length + 5) * 880,
audioCtx.currentTime,
)
oscillator.start()
oscillator.stop(audioCtx.currentTime + 0.01)
})
observer.observe(document, {
attributes: true,
childList: true,
subtree: true,
characterData: true,
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment