Главная страница → Earcons

Звуковое соопровождение UI на Тильде используя Vibe блок

Дисклеймер:
Звуковой сигнал (earcon) — это короткий, характерный звук, обозначающий конкретное событие или передающий другую информацию. Звуковые сигналы являются распространенной функцией компьютерных операционных систем и приложений, начиная от простого звукового сигнала, указывающего на ошибку, до настраиваемых звуковых схем современных операционных систем, которые обозначают запуск, завершение работы и другие события. Термин впервые используется в 1985 году, а в 89 году уже получил более широкое распространение. (https://en.wikipedia.org/wiki/Earcon).

Крупные продукты давно используют звук не только для доступности, но и для узнаваемости бренда — например, щелчок клавиш экранной клавиатуры в iOS или блокировки экрана — они давно стали частью фирменного UX-языка экосистемы.

Почему это реальная задача.

На Тильде весь фидбек пользователю — только визуальный: цвет кнопки поменялся, появилась галочка, поле в форме подсветилось красным. Но визуальный канал не единственный, и не самый быстрый. Кликаешь "в корзину" на мобильном — палец закрывает экран в момент тапа. Визуальное подтверждение приходит с задержкой: нужно убрать палец и вернуть взгляд. Короткий звук долетает мгновенно, ещё до того как глаз вернулся на экран.

В первую очередь хотелось бы добавить звуки не для красоты, а чтобы перенести доказавший себя за 35+ лет паттерн подтверждения действия в среду, где ни один конструктор этого не даёт из коробки.

4 примера которые демонстрируются ниже:

клик по ссылкам и кнопкам — щелчок;
произошла ошибка в форме; успешная отправка формы;
открытие и скрытие поп-апа — взмах веера;
добавление товара в корзину — падающая капля, и изображение товара летит в корзину.

Пример

290

₽

400

₽

Кликни сюда тоже

Пример промптов для создания UI-звуков по группам,
кликай чтобы увидеть текст

Создай самодостаточный сниппет на чистом JavaScript (Web Audio API, без библиотек и без аудиофайлов; весь звук синтезируется в реальном времени). Подключайся делегированием событий на document (в фазе перехвата), чтобы работало и для динамически добавленных элементов. Один общий AudioContext, создаётся лениво и возобновляется на первом пользовательском жесте.

Нужен ОДИН-ЕДИНСТВЕННЫЙ звук — короткий сухой «тик"/щелчок. Когда воспроизводить:
— клик по кнопке (button), ссылке (a), label или input — ЛИБО по любому вложенному внутри них элементу (иконка svg, span с текстом и т. п.). Нужный элемент определяй через closest () — подъёмом ВВЕРХ по дереву от event. target к ближайшему такому предку, а НЕ сравнением тега точной цели клика;
— нажатие клавиш (keydown) при наборе в input и textarea.
Ровно один звук на одно действие. Учти: клик по label может породить ещё и событие на связанном input — предусмотри очень короткое подавление повторов, чтобы звук не прозвучал дважды.

Характер звука — чёткий сухой мгновенный «тик"/щелчок, как в аккуратных минималистичных интерфейсах.
Техника: очень короткий всплеск шума, пропущенный через УЗКОПОЛОСНЫЙ фильтр — выделяется узкая полоса частот в верхней области, без открытого шипения верхов и без низкого гула; с быстрым плавным ЭКСПОНЕНЦИАЛЬНЫМ затуханием.

Обязательно:
— Звук ОЧЕНЬ КОРОТКИЙ — буквально мгновение, порядка 20 мс, ощутимо короче обычного клика.
— БЕЗ звонкой ноты, БЕЗ послезвучия и хвоста, БЕЗ какого-либо тонального призвука — только сухой сфокусированный щелчок.
— Громкость умеренная, примерно вполсилы: отчётливо слышно, но негромко и деликатно.

Скрипт должен работать сразу после вставки на любую страницу

Самодостаточный сниппет на чистом JavaScript (Web Audio API + DOM/CSS, без библиотек и без аудиофайлов; звук синтезируется в реальном времени). Один общий AudioContext, создаётся лениво и возобновляется на первом действии пользователя.

ОБЩИЙ ТРИГГЕР: клик по ссылке-кнопке «в корзину» — ссылке <a> с href="#order" (по нажатию она кладёт товар в корзину). Клик может прийтись по вложенному значку или тексту внутри ссылки, поэтому определяй ссылку через closest от места клика (ищи ближайший предок a[href="#order"]). Подключайся делегированием событий на document (фаза перехвата), чтобы работало и для динамически добавленных ссылок. На другие ссылки и кнопки не реагируй.

# ЧАСТЬ 1. ЗВУК.

Мягкое короткое положительное подтверждение «добавлено», из ДВУХ нот, восходящих на чистую квинту. Один звук на клик, с коротким подавлением повторов (около 100 мс).
Техника (точный ориентир):
— Две чистые СИНУСОИДЫ, без шума, без фильтров, без эха.
— Нота 1: 523 Гц (до), сразу.
— Нота 2: 784 Гц (соль — чистая квинта выше), со сдвигом примерно 80 миллисекунд.
— У каждой очень быстрая мягкая атака около 2 миллисекунд, затем плавное ЭКСПОНЕНЦИАЛЬНОЕ затухание: первая нота примерно до 0.1 секунды, вторая примерно до 0.15 секунды.
— Пиковая громкость каждой ноты примерно 0.3 (негромко, деликатно).

## ЧАСТЬ 2. ПОЛËТ.

На этот же клик запусти визуальный эффект: миниатюра товара вылетает из места клика и летит к иконке корзины. Только чистый JS и CSS (например Web Animations API element.animate или CSS-переходы), без библиотек.
1. Определи URL картинки товара так: от нажатой ссылки поднимись ВВЕРХ по дереву до карточки товара — ближайшего предка с классом js-product. Внутри этой карточки найди ПЕРВЫЙ тег <meta itemprop="image"> и возьми URL из его атрибута content (там лежит полный адрес картинки товара). Если карточка или такой мета-тег не найдены — анимацию полёта не запускай (звук всё равно должен играть).
2. Создай элемент <img> с этой картинкой: небольшой размер (примерно 200х200 пикселей), position: fixed, очень высокий z-index (поверх всего), pointer-events: none, слегка скруглённые углы. Помести его в точку клика КУРСОРА (координаты курсора в момент клика), отцентрировав относительно курсора.
3. Найди на странице целевой элемент — ссылку a[href="#opencart"] (иконка/кнопка открытия корзины) — и возьми координаты её центра. Их может быть несколько, и первая может быть скрытой (размером 0x0) — в неё лететь нельзя. Выбери первую видимую (ненулевые размеры, реально отрисована).
4. Плавно анимируй перелёт картинки от точки клика К центру цели за 500 миллисекунд (вся траектория укладывается в 500 мс). Путь должен быть НЕ прямой, а в форме буквы «L» / гиперболы: сначала картинка идёт преимущественно по ГОРИЗОНТАЛИ (почти вдоль по X, примерно до уровня корзины по горизонтали), затем плавно заворачивает и движется ВВЕРХ (по вертикали) к корзине. Переход между горизонтальным и вертикальным участком должен быть СГЛАЖЕННЫМ (как плавный изгиб гиперболы), а не резким прямым углом. Одновременно немного уменьшай картинку (scale вниз).
5. Прозрачность: почти всю дорогу картинка остаётся видимой (opacity близко к 1), а гаснет только в самом конце. Зарони ключевые точки прозрачности так: на 99% времени анимации opacity: 0.1, а в конце (100%) opacity: 0. Позиция в конце — почти у цели, совсем чуть-чуть не доходя до неё.
6. По завершении анимации удали этот элемент <img> из DOM (очистка).
Если целевой элемент a[href="#opencart"] на странице не найден — можно не запускать полёт (или дать картинке просто погаснуть на месте).

Скрипт должен работать сразу после вставки на страницу.

Самодостаточный сниппет на чистом JavaScript (Web Audio API, без библиотек и без аудиофайлов; весь звук синтезируется в реальном времени; без зависимости от внутреннего кода самой страницы). Один общий AudioContext, создаётся лениво и возобновляется на первом пользовательском жесте. Рассчитан на вставку в консоль браузера и работу сразу после вставки на любую страницу с такой формой.

Задача: на странице с формой, собранной на конструкторе Tilda, ловить момент, когда форма ругается на неверный ввод, и в этот момент проигрывать звук «ошибка / отказ», а также выводить одну аккуратную запись в консоль.

Что происходит на странице: когда пользователь вводит в поле что-то некорректное (например, не-почту в поле email) и нажимает кнопку отправки, форма подсвечивает поле красным и показывает под собой красное сообщение об ошибке. Отдельного JavaScript-события об этом форма наружу не рассылает — ошибка проявляется как визуальное изменение на странице: ранее скрытое сообщение об ошибке становится видимым. Нужно ловить именно этот момент появления ошибки.

Триггеры и поведение:
— основной триггер: появление видимой ошибки формы (как определять — см. ориентир ниже) → проиграть звук ошибки и вывести в консоль одну запись с текстом сообщения и меткой времени;
— если на одну неудачную отправку сразу показывается несколько сообщений об ошибке, звук должен прозвучать ОДИН раз, а не по разу на каждое поле — предусмотри очень короткое подавление повторов;
— одна ошибка — одно срабатывание, пока состояние не изменилось (когда ошибка снова показывается после того как пропала — это новое срабатывание);
— один звук на срабатывание, без наложений, длительность заметно меньше 1 секунды;
— дополнительно выстави глобальную функцию window. playError (), чтобы этот же звук можно было вызвать из кода вручную;
— если на странице несколько форм — следить за всеми;
— при запуске один раз подтвердить в консоли, что наблюдение включено.

Ориентир (если потребуется): в Tilda сообщения об ошибке заранее присутствуют на странице скрытыми и помечены служебным классом, содержащим «js-rule-error»; текст сообщения лежит внутри такого элемента. По появлению видимости такого элемента и определяется ошибка формы. Форма может отрендериться не мгновенно после загрузки — это стоит учесть, но без бесконечного ожидания.

ХАРАКТЕР ЗВУКА: деликатный сигнал «что-то не так» — по смыслу противоположность «успеху». Это короткое НИСХОДЯЩЕЕ движение из двух низких нот (сверху вниз, ощущение «у-ух»), с лёгкой диссонирующей, «неправильной» окраской — но БЕЗ резкости, БЕЗ противного электронного зуммера, тихо и мягко. Тон приглушённый, матовый (не звонкий колокольчик). У нот быстрая атака и умеренный спад. БЕЗ эха и хвоста — сухо, чтобы звук ощущался определённым и «отрицательным». Низкий регистр. Громкость умеренная.

Ориентиры по звуку (если потребуются числа): две ноты, идущие вниз, примерно от 440 Гц к 330 Гц (можно чуть более напряжённый, «диссонансный» интервал для ощущения «не так»), общая длительность около 0.3−0.4 секунды.

Скрипт должен работать сразу после вставки на любую страницу.

Самодостаточный сниппет на чистом JavaScript (Web Audio API, без библиотек и без аудиофайлов; звук синтезируется в реальном времени). Один общий AudioContext, создаётся лениво и возобновляется на первом действии пользователя.

Задача: короткий воздушный звук-взмах («вжух») при показе и при скрытии всплывающего окна.

Триггер: наблюдай через MutationObserver за атрибутом class у элемента body. Считай окно показанным, если среди классов body есть класс, имя которого СОДЕРЖИТ подстроку «_popupshowed» (проверяй именно вхождение подстроки, а не точное имя класса). Играй звук, когда это состояние меняется: когда такой класс появился (окно показано) и когда он пропал (окно скрыто). Реагируй только на смену состояния «есть / нет»; добавь очень короткое подавление повторов от одинаковых мутаций. Один звук на одно изменение, без наложений.

При скрытии звук должен звучать как реверс звука показа: полоса фильтра движется в обратную сторону (сверху вниз вместо снизу вверх), а огибающая громкости зеркальная (быстрый подъём в начале и долгий спад — вместо нарастания к концу). Показ — взмах «туда», скрытие — тот же взмах «обратно».

Характер: средний плотный воздушный взмах с текстурой движущегося воздуха, как взмах веера. Только фильтрованный шум, без тонов и нот. Техника-ориентир: белый шум через полосовой фильтр (bandpass) с центром полосы, плавно ползущим вверх примерно от 600 к 2500 Гц, умеренная добротность (чтобы подчеркнуть движение).

Требования: длительность не больше 200 миллисекунд; при показе огибающая нарастает от нуля к пику ближе к концу и затем коротко спадает; пиковая громкость примерно 0.16 (мягкий деликатный уровень); без звона.

Скрипт должен работать сразу после вставки на любую страницу.