聆听您的网页

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您的旅程每个阶段提供云产品。 立即开始使用 200 美元免费额度!

来自 Tom Hicks 的 一个巧妙的想法,它结合了 MutationObserver(可以“观察”元素的更改,例如属性、文本或子元素的更改)和 Web Audio API 来创建声音。 将此代码放入您想听 DOM 更改的页面控制台中,以听到它的操作。

我在 我的无服务器网站 上试用过它,因为它是一个 SPA,因此在您浏览时会产生大量的 DOM 活动。

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

看起来 Tom 正在尝试其他音频... 我们应该叫它们什么? 声音化? 就像这个 扫荡声。 已经有了 一个浏览器扩展,其中包括网络活动发生的音效。

直接链接 →