Прогресс-бар в виде волны

2 min read

Визуальная волна заменяет стандартный линейный прогресс-бар. Каждый пост получает уникальный узор, поэтому каждый плеер выглядит по-своему. Доступно на планах Pro и Agency.

Как включить

  1. Перейдите в Синтез речи → Плеер.
  2. В разделе Стиль прогресс-бара выберите Волна.
  3. Сохраните.

Теперь все аудиоплееры на вашем сайте используют отображение волны.

Почему каждый пост получает уникальный узор

Волна генерируется на основе идентификатора поста. Это означает:

  • Каждый пост имеет визуально отличимую волну
  • Один и тот же пост всегда отображает одну и ту же волну
  • Волна не отражает реальный аудиосигнал (это детерминированный визуальный узор)

Это выглядит значительно лучше, чем статичная полоса, и не увеличивает размер файла - волна представляет собой встроенный SVG из 60 полос.

Клик и перетаскивание для перемотки

Волна интерактивна:

  • Кликните в любое место, чтобы перейти к этой позиции
  • Зажмите и перетащите индикатор позиции для перемотки аудио
  • Работает на десктопе и сенсорных устройствах

Цвета

Волна использует два цвета из настроек плеера:

  • Цвет по умолчанию - непрослушанные полосы
  • Цвет воспроизведения - полосы позади ползунка

Измените их в Синтез речи → Плеер → Цвета.

Производительность

  • Волна представляет собой один встроенный SVG (около 2 КБ на плеер)
  • Не требует дополнительного JavaScript сверх того, что уже загружает плеер
  • Не влияет на Core Web Vitals

Резервный вариант для бесплатных пользователей

Пользователи бесплатного плана видят линейный прогресс-бар, даже если выбрана волна - это функция PRO.

Связанные страницы