Listen to your web pages

plink-honk.js

/*
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
honks.
I have found this interesting for debugging, but also fun to hear web pages
render like geese.
*/

const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const url = 'https://firebasestorage.googleapis.com/v0/b/mutation-honk.appspot.com/o/Honk1.mp3?alt=media';

let honkBuffer;

fetch(url)
    .then(response => response.arrayBuffer())
    .then(arrayBuffer => audioCtx.decodeAudioData(arrayBuffer))
    .then(audioBuffer => {
        honkBuffer = audioBuffer;
    });

const clamp = (val, min, max) => {
  return val < min 
    ? min
    : val > max 
      ?  max
      : val;
};

const playHonk = (detune = 0) => {
  const source = audioCtx.createBufferSource();

  source.buffer = honkBuffer;
  source.connect(audioCtx.destination);
  source.detune.value = clamp(detune, -1000, 1000);
  source.start(audioCtx.currentTime, 0.2);
  source.stop(audioCtx.currentTime + 0.5);
};

const observer = new MutationObserver(function(mutationsList) {
    playHonk(Math.log(mutationsList.length + 1) * 10);
});

observer.observe(document, {
    attributes: true,
    childList: true,
    subtree: true,
    characterData: true,
});

Jesus... 💘