Listen to your web pages

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
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.type = “sine”
Math.log(mutationsList.length + 5) * 880,
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
Pixallus Website Giveaway

We understand COVID has created shifts in many people’s lives. That’s why we’ve decided to giveaway a fully functional website with all the tools you

Read More »
How to Choose WordPress Hosting

Pixallus WordPress Hosting. Simplified. Enjoy blazing fast WordPress website loading speeds and 99.9% uptime. Whether you’re a freelancer, small business, or a large organization, we

Read More »