Web Audio API

bookmarklet.js

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

Decorator.js

// function decorator
var withJson = f => async url => {
  var result = await f(url)
  .catch(error => {console.log('->', error)})
  
  return result
}

// decorated function
var fetchJson = withJson(fetch)

console.time('fetch')

await fetchJson('http://localhost:3000/api/v1/dataset/list')
  .then(response => response.json())
  .then(data => {console.log(data)})

console.timeEnd('fetch')

/*
await fetch('http://localhost:3000/api/v1/dataset/list')
  .then(response => response.json())
  .then(data => {console.log(data)})
*/

md.md

sfsdf

asdasdd

plink-plonk

plink-plonk.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
audio.

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

sweep-swoop.js

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