Skip to content

Instantly share code, notes, and snippets.

@tomhicks
Last active December 10, 2021 10:02
Show Gist options
  • Star 30 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save tomhicks/fda1283bc4e8725aa4c9a5e21f0d830f to your computer and use it in GitHub Desktop.
Save tomhicks/fda1283bc4e8725aa4c9a5e21f0d830f to your computer and use it in GitHub Desktop.
Listen to your web pages
const audioCtx = new window.AudioContext();
const oscillator = audioCtx.createOscillator();
oscillator.connect(audioCtx.destination);
oscillator.type = "sine";
let numItems = 0
oscillator.frequency.setValueAtTime(
1,
audioCtx.currentTime
);
oscillator.start();
const observer = new MutationObserver(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
});
@tomhicks
Copy link
Author

This is a slightly different version where the pitch of a single oscillator changes continuously so it's a bit more continuous.

@nickdotht
Copy link

Hahaha, even cooler. Sounds more futuristic. I'll add this as a feature to my Chrome extension.

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