Listen to your Web Pages

Always notice how in sci-fi movies the computers make those weird bleepy sounds?

Tom Hicks has created a JavaScript snippet that combines MutationObserver with AudioContext to recreate that effect.

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.

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,
})

Try it on Facebook for example. It beeps all over the place 😆

There’s also an alternate version that mimics the effect as heard on TV better:

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
});

There’s also a browser extension available, but be warned: there’s no off switch (you’ll have to remove it to disable it)