Самодостаточный сниппет на чистом JavaScript (Web Audio API, без библиотек и без аудиофайлов; весь звук синтезируется в реальном времени; без зависимости от внутреннего кода самой страницы). Один общий AudioContext, создаётся лениво и возобновляется на первом пользовательском жесте. Рассчитан на вставку в консоль браузера и работу сразу после вставки на любую страницу с такой формой.
Задача: на странице с формой, собранной на конструкторе Tilda, ловить момент, когда форма ругается на неверный ввод, и в этот момент проигрывать звук «ошибка / отказ», а также выводить одну аккуратную запись в консоль.
Что происходит на странице: когда пользователь вводит в поле что-то некорректное (например, не-почту в поле email) и нажимает кнопку отправки, форма подсвечивает поле красным и показывает под собой красное сообщение об ошибке. Отдельного JavaScript-события об этом форма наружу не рассылает — ошибка проявляется как визуальное изменение на странице: ранее скрытое сообщение об ошибке становится видимым. Нужно ловить именно этот момент появления ошибки.
Триггеры и поведение:
— основной триггер: появление видимой ошибки формы (как определять — см. ориентир ниже) → проиграть звук ошибки и вывести в консоль одну запись с текстом сообщения и меткой времени;
— если на одну неудачную отправку сразу показывается несколько сообщений об ошибке, звук должен прозвучать ОДИН раз, а не по разу на каждое поле — предусмотри очень короткое подавление повторов;
— одна ошибка — одно срабатывание, пока состояние не изменилось (когда ошибка снова показывается после того как пропала — это новое срабатывание);
— один звук на срабатывание, без наложений, длительность заметно меньше 1 секунды;
— дополнительно выстави глобальную функцию window. playError (), чтобы этот же звук можно было вызвать из кода вручную;
— если на странице несколько форм — следить за всеми;
— при запуске один раз подтвердить в консоли, что наблюдение включено.
Ориентир (если потребуется): в Tilda сообщения об ошибке заранее присутствуют на странице скрытыми и помечены служебным классом, содержащим «js-rule-error»; текст сообщения лежит внутри такого элемента. По появлению видимости такого элемента и определяется ошибка формы. Форма может отрендериться не мгновенно после загрузки — это стоит учесть, но без бесконечного ожидания.
ХАРАКТЕР ЗВУКА: деликатный сигнал «что-то не так» — по смыслу противоположность «успеху». Это короткое НИСХОДЯЩЕЕ движение из двух низких нот (сверху вниз, ощущение «у-ух»), с лёгкой диссонирующей, «неправильной» окраской — но БЕЗ резкости, БЕЗ противного электронного зуммера, тихо и мягко. Тон приглушённый, матовый (не звонкий колокольчик). У нот быстрая атака и умеренный спад. БЕЗ эха и хвоста — сухо, чтобы звук ощущался определённым и «отрицательным». Низкий регистр. Громкость умеренная.
Ориентиры по звуку (если потребуются числа): две ноты, идущие вниз, примерно от 440 Гц к 330 Гц (можно чуть более напряжённый, «диссонансный» интервал для ощущения «не так»), общая длительность около 0.3−0.4 секунды.
Скрипт должен работать сразу после вставки на любую страницу.