Настройка аудиоплеера

6 min read

Аудиоплеер - это то, что видят и на что нажимают ваши посетители. Вы можете изменить его цвета, положение на странице, размер и набор элементов управления. Просматривайте изменения в режиме реального времени перед сохранением.

Откройте страницу настроек плеера

Перейдите в Синтез речи - Плеер. Страница разделена на пять разделов:

  1. Расположение
  2. Цвета
  3. Стиль прогресс-бара
  4. Отображаемые элементы управления
  5. Предварительный просмотр

Каждое изменение обновляет превью в нижней части страницы.

Расположение

Где плеер отображается в ваших записях. Выберите один вариант:

  • Перед заголовком: над заголовком записи
  • После заголовка: между заголовком и первым абзацем
  • После содержимого: в конце записи (по умолчанию)
  • Перед анонсом: отображается только в архивах и списках блога
  • После анонса: отображается после анонсов записей в архивах
  • Закреплённая панель внизу (PRO): прикреплена к нижней части страницы при прокрутке

Для большинства блогов лучше всего подходит После заголовка или После содержимого. Подробнее о закреплённой панели - в разделе Sticky Footer Player.

Цвета

Три цветовых палитры управляют внешним видом плеера:

  • Фон: цвет поверхности плеера
  • Текст: цвет заголовка и отображения времени
  • Акцент / Воспроизведение: кнопка воспроизведения, заливка прогресса и активные иконки

Выбирайте цвета, соответствующие вашей теме. Превью обновляется в реальном времени.

Совет: Если вы используете CSS-переменные в вашей теме, вы можете переопределить эти цвета с помощью пользовательского CSS. Подробнее - в разделе Пользовательский CSS.

Стиль прогресс-бара

Два варианта:

  • Линейный: стандартный горизонтальный прогресс-бар (по умолчанию)
  • Волновая форма (PRO): визуальная волновая форма с уникальным рисунком для каждой записи

Волновая форма добавляет индивидуальность каждой записи и отлично смотрится для подкаст-контента. Основана на SVG и практически не увеличивает вес страницы. Подробнее - в разделе Волновой прогресс-бар.

Элементы управления

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

  • Воспроизведение / пауза: всегда включено (нельзя отключить)
  • Текущее время и продолжительность
  • Скорость воспроизведения (0.5x, 1x, 1.25x, 1.5x, 2x)
  • Громкость
  • Скачать
  • Петля
  • Иконка информации (показывает название голоса и язык)

Для обеспечения доступности рекомендуем оставить включёнными Отображение времени, Скорость и Скачать.

Предварительный просмотр

Нижняя часть страницы показывает именно то, что увидят ваши посетители. При нажатии воспроизводится небольшой фрагмент текста. Превью обновляется при каждом изменении.

Нажмите Сохранить изменения на верхней панели, когда будете довольны результатом. Изменения мгновенно применяются ко всем записям с аудио.

Поведение на мобильных устройствах

Плеер адаптивен и подстраивается под экраны меньшего размера:

  • До 480px: элементы управления «Скачать» и «Информация» сворачиваются в меню
  • До 320px: элементы «Петля» и «Скорость» скрываются полностью, остаются только «Воспроизведение» и «Время»

Кеширование динамического CSS

Выбранные вами цвета кешируются на 12 часов, чтобы не генерировать CSS при каждой загрузке страницы. При сохранении изменений кеш очищается автоматически. Если вы видите старые цвета, выполните жёсткое обновление страницы (Ctrl+Shift+R).

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