Оживляет плеер, который вы нарисовали в Zero-блоке сами: фигуры, кнопки, тексты и картинки становятся кнопкой запуска, полосой перемотки с перетаскиванием, регулятором громкости, таймером и обложкой. Достаточно задать элементам классы — внешний вид целиком ваш.
Готовый плеер всегда выглядит как чужой: свои шрифты, свои скругления, свои иконки. Здесь наоборот — вы рисуете плеер в Zero-блоке как обычную композицию, а модификация связывает нарисованное со звуком. Никакой своей разметки она не добавляет и ничего не перекрашивает.
Обязателен только один элемент — кнопка запуска. Всё остальное добавляется по желанию: чего не нарисовали, того в плеере не будет.
Некодимaudio-play — кнопка «слушать». Может быть фигурой, кнопкой, картинкой или текстом.audio-pause — отдельная кнопка паузы. Если она нарисована, во время звучания показывается вместо кнопки запуска, иначе запуск работает переключателем.audio-prev и audio-next — предыдущий и следующий трек.audio-speed — скорость: по нажатию 1×, 1,25×, 1,5×, 2×, 0,75×, надпись обновляется сама.audio-bar — дорожка. Нажатие и перетаскивание по ней перематывают трек.audio-progress — заполнение: обрезается по ходу трека, поэтому скругления, тени и градиенты не искажаются.audio-buffer — загруженная часть, если хотите показать буфер.audio-thumb — бегунок, который едет вдоль дорожки и тянется мышью или пальцем.audio-volume — дорожка громкости, audio-volume-progress — её заполнение, audio-volume-thumb — её бегунок.audio-mute и audio-unmute — выключить и включить звук; если нарисована только одна из двух, она работает переключателем.audio-title — название трека, audio-artist — исполнитель.audio-time — прошедшее время, audio-duration — общая длительность.audio-cover — обложка: подойдёт и картинка, и фигура (у фигуры меняется фон). У каждого трека обложка своя; для альбома достаточно указать одну в настройках. Если обложки нет ни у трека, ни в настройках, элемент прячется.audio-track — элемент списка. Их порядок должен совпадать с порядком треков в настройках; нажатие включает свой трек, а текущему добавляется класс audio-track-active.Дорожка, заполнение и буфер — это три фигуры одного размера, положенные друг на друга: audio-bar, audio-buffer, audio-progress. Так же и у громкости: audio-volume и audio-volume-progress совпадают по размеру и месту. Заполнение всегда рисуется целиком, на всю длину дорожки — обрезает его сам скрипт.
Бегунок рисуется поверх дорожки и в её пределах: где нарисовали, оттуда он и начнёт движение, а до правого края доедет ровно своим краем. Порядок фигур влияет только на вид — за нажатия отвечает дорожка, а верхние слои скрипт делает «прозрачными» для мыши.
Полосу можно нарисовать и вертикальной: если фигура выше, чем шире, она сама начинает работать снизу вверх.
Автовоспроизведения нет: браузеры блокируют звук без действия посетителя. На iPhone и iPad громкость программно не меняется — она только на кнопках устройства; в этом случае дорожке громкости добавляется класс audio-volume-unavailable, чтобы её можно было спрятать своим стилем.
Для доступа к этой модификации нужна премиум подписка
Сначала войдите в аккаунт