Skip to content

Instantly share code, notes, and snippets.

@mykt0ngc0

mykt0ngc0/plink-plonk.js

Forked from tomhicks/plink-plonk.js
Created August 31, 2021 09:42
Show Gist options
  • Save mykt0ngc0/3c9876988afc185aca1e66edb0e5615c to your computer and use it in GitHub Desktop.
Save mykt0ngc0/3c9876988afc185aca1e66edb0e5615c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @tomhicks tomhicks revised this gist Feb 14, 2020. 1 changed file with 9 additions and 0 deletions.
    9 changes: 9 additions & 0 deletions plink-plonk.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,12 @@
    /*
    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()
  2. @tomhicks tomhicks created this gist Feb 14, 2020.
    21 changes: 21 additions & 0 deletions plink-plonk.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,21 @@
    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,
    })