Escuche sus paginas web

Una idea inteligente de Tom Hicks que combina MutationObserver(que puede “observar” cambios en elementos como cuando cambian sus atributos, texto o elementos secundarios) y la API de Web Audio para crear sonidos. Coloque este código en la consola de una página donde le gustaría escuchar esencialmente cualquier cambio de DOM para escuchar cómo funciona.

Jugué con él en mi sitio sin servidor porque es un SPA, por lo que hay mucha actividad DOM mientras navegas.

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

Parece que Tom está experimentando con otros audios… ¿cómo deberíamos llamarlos? ¿Auralizaciones? Como este de barrido . Ya existe una extensión de navegador para ello, que incluye sonidos para la actividad de la red.

Enlace directo →