Cuelume — живые звуки интерфейса

источник ↗ ·

Лёгкая библиотека cuelume, которая генерирует крошечные звуки взаимодействия в реальном времени через Web Audio API без файлов и зависимостей.

web-audio ui-sounds frontend javascript micro-interactions zero-dependency accessibility

privacy

Эта заметка участвует в semantic memory.

AI Summary

🚀 TL;DR Cuelume — мини-библиотека, которая синтезирует короткие звуки UI-действий прямо в браузере через Web Audio API, не требуя аудиофайлов и внешних зависимостей.

📖 Что это такое Инструмент для добавления «живых» звуковых откликов на hover, press, release и toggle. Всё работает через data-атрибуты и простые JS-вызовы.

🔑 Ключевые факты

  • Синтезирует звук в реальном времени (live synthesis).
  • Нет файлов, нет runtime-зависимостей.
  • Поддерживает паттерны: hover, press, release, toggle.
  • Доступен императивный API: bind() и play("success").
  • Примеры: data-cuelume-hover, data-cuelume-press, data-cuelume-release, data-cuelume-toggle.

⚙️ Как это работает / применить

  1. Импорт: import { bind, play } from "cuelume".
  2. Автоматическая привязка: bind() — подключает все элементы с data-атрибутами.
  3. Ручной вызов: play("success") или play("tick").
  4. HTML-пример: <button data-cuelume-hover="tick">Docs</button>.

💡 Вывод и значение Cuelume позволяет быстро добавить микровзаимодействия без веса и сложностей, улучшая восприятие интерфейса и доступность для пользователей с нарушениями зрения.

Мои мысли

graph

Карта связей