">Listen To Your Web Pages » Pixallus

Listen to your web pages

gist-og-image.png
Listen to your web pages 1
Listen to your web pages · GitHub

Instantly share code, notes, and snippets.

Listen to your web pages

/*
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,
})
You can’t perform that action at this time.

This post was originally posted here

Check out our Starter Sites built with #ToolWeLove including Toolset, Elementor Pro, and Astra Pro.

 

Share this page
Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on email
sendinblue