Жуэль-про
С недавних пор у меня в разделе миксов работают интерактивные плейлисты. Можно кликать в треки, и микс перемотается в нужное место, и наоборот: в плейлисте автоматически подсвечивается трек, который сейчас играет в миксе. Попробуйте.
Вы можете подумать, что для этого пришлось писать гору Джаваскрипта. Но на самом деле нет, просто я использую новый Жуэль-про. Гору Джаваскрипта пришлось писать Жене Лазареву, который запрограммировал Жуэль-про. А мне осталось только воспользоваться новым супермощным декларативным АПИ, которое мы придумали.
Рассказываю.
Если вы использовали Жуэль, вы знаете, что чтобы вставить на страницу аудиоплеер, достаточно просто поставить ссылку на МП3-файл и дать ей класс jouele:
<a href="ilya-birman-use-me-mix.mp3" class="jouele">
Илья Бирман: Юз ми
</a>Но что, если рядом с плеером стоит обложка, и я хочу, чтобы микс начинал играть по клику в обложку? С Жуэлем-про это делается так:
<img
src="cover.jpg"
class="jouele-control"
data-type="play-pause"
/>Теперь в обложку можно кликать, и микс заиграет. И запаузится, если кликнуть ещё раз.
Если я хочу, чтобы в плейлисте можно было кликнуть на конкретный трек, и микс перемотался на его место, я делаю так:
<tr class="jouele-control"
data-type="seek" data-to="0:45:38"
>
<td>0:45:38</td>
<td>Tensal</td>
<td>Achievement 3</td>
</tr>Теперь клик в эту строчку таблицы будет перематывать микс куда надо.
Но это не главная прелесть. Я же ещё хочу, чтобы во время воспроизведения обложка выглядела активной. Для этого я просто пишу в ЦССе:
img.jouele-is-playing {
outline: rgba(255, 255, 255, .2) 10px solid;
}Всё! Жуэль-про сам даёт класс jouele-is-playing своим элементам управления во время воспроизведения, поэтому подсветка просто работает независимо от того, как именно я включил музыку — из плеера, обложкой или вообще клавиатурой. Мне снова не нужен Джаваскрипт.
И точно так же работает подсветка активной строчки в плейлисте. На самом деле ХТМЛ-код каждой строчки выглядит не так, как я показал выше, а вот так:
<tr class="jouele-control"
data-type="seek" data-range="0:45:38...0:48:55"
>
<td>0:45:38</td>
<td>Tensal</td>
<td>Achievement 3</td>
</tr>То есть строчка не только перематывает в определённую точку, но ещё и соответствует некоему отрезку. Чтобы она подсветилась, снова достаточно только ЦССа:
tr.jouele-is-within {
background: rgba(255, 255, 255, .2);
color: #fd0093;
}Всё! Жуэль-про сам даёт класс jouele-is-within своим элементам управления, соответствующим диапазону, когда позиция воспроизведения находится внутри этого диапазона.
Я ещё хочу, чтобы у всех элементов, которые можно кликать или тащить, курсор мыши был пальчиком. Для этого я делаю так:
.jouele-is-interactive {
cursor: pointer;
}Если плееров на странице несколько, то элементы управления управляют тем, который играет или играл последним. А если такого ещё нет, то запустит первый на странице. Чтобы привязать к конкретному плееру, есть data-href:
<img
src="cover.jpg"
class="jouele-control"
data-type="play-pause"
data-href="ilya-birman-use-me-mix.mp3"
/>На странице каждого микса у меня всегда один плеер, поэтому это там не нужно.
Жуэль-про стоит 1890 рублей на один домен. Обычный бесплатный Жуэль доступен как раньше.
Что посмотреть:
- Жуэль
- Жуэль-про
- Документация
Как использовать декларативное АПИ и элементы управления. Есть пример полностью кастомного плеера, собранного из разных элементов управления - Продвинутая документация
Ручная инициализация через Джаваскрипт, АПИ и т. д. - Женя Лазарев
