dr.Brain

doctor Brain

мир глазами веб-разработчика

Слушайте свои страницы

скрипт от Тома Хикса, который озвучивает веб-сайты

dr.Brain

время чтения 1 мин.

Photo by Alphacolor on Unsplash

Замечательная идея Тома Хикса (Tom Hicks) объединяет MutationObserver, который предоставляет возможность получать информацию об изменениях элементов (например, при изменении атрибутов элементов, их текста или дочерних блоков), и Web Audio API для создания звуков.

Хотите узнать что получилось?

Просто запустите код приведененный ниже в консоли браузера на любой странице, и Вы сможете услышать практически любые изменения 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,
})  

Получилось довольно интересное решение.


Спасибо за внимание.

Новые публикации

Далее

Категории

О нас

Frontend & Backend. Статьи, обзоры, заметки, код, уроки.