Skip to content

Instantly share code, notes, and snippets.

@tomhicks
Last active November 12, 2024 19:08
Show Gist options
  • Save tomhicks/6cb5e827723c4eaef638bf9f7686d2d8 to your computer and use it in GitHub Desktop.
Save tomhicks/6cb5e827723c4eaef638bf9f7686d2d8 to your computer and use it in GitHub Desktop.
Listen to your web pages
@AlexRatmansky
Copy link

And the bookmarklet version:

javascript:(function(){const%20audioCtx=new(window.AudioContext||window.webkitAudioContext);const%20oscillator=audioCtx.createOscillator();oscillator.connect(audioCtx.destination);oscillator.type="sine";let%20numItems=0;oscillator.frequency.setValueAtTime(1,audioCtx.currentTime);oscillator.start();const%20observer=new%20MutationObserver(function(mutationsList){numItems+=mutationsList.length;oscillator.frequency.setValueAtTime(Math.log(numItems+1)*440,audioCtx.currentTime);setTimeout(()=>{numItems-=mutationsList.length;if(numItems===0){oscillator.frequency.setValueAtTime(1,audioCtx.currentTime)}else{oscillator.frequency.setValueAtTime(Math.log(numItems+1)*440,audioCtx.currentTime)}},100)});observer.observe(document,{attributes:true,childList:true,subtree:true,characterData:true})})();

@aibolik
Copy link

aibolik commented Feb 21, 2020

Maybe someone makes some chrome extension?

Yeah, let's do it... (adding to backlog) 😅

@nickdotht
Copy link

nickdotht commented Feb 21, 2020

@aibolik Already in the making: https://github.com/r4meau/plink-plonk

Feel free to fork and contribute... or start your own. 😄

I'm gonna go slow on it for now (Sunday only), but I'll accept useful PRs at anytime.

@mahnouel
Copy link

mahnouel commented Feb 28, 2020

Could anyone add reload support? This is so wonderful 🥰 Maybe via localStorage? Or as Firefox Extension?

@iamnmanoj
Copy link

Its so helpful to find out the DOM manipulations happening behind the eyes!!. Good job @R4meau

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment