Жуэль-про

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

Вы можете подумать, что для этого пришлось писать гору Джаваскрипта. Но на самом деле нет, просто я использую новый Жуэль-про. Гору Джаваскрипта пришлось писать Жене Лазареву, который запрограммировал Жуэль-про. А мне осталось только воспользоваться новым супермощным декларативным АПИ, которое мы придумали.

Рассказываю.

Если вы использовали Жуэль, вы знаете, что чтобы вставить на страницу аудиоплеер, достаточно просто поставить ссылку на МП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 рублей на один домен. Обычный бесплатный Жуэль доступен как раньше.

Что посмотреть:

• Жуэль
• Жуэль-про
• Документация
  Как использовать декларативное АПИ и элементы управления. Есть пример полностью кастомного плеера, собранного из разных элементов управления
• Продвинутая документация
  Ручная инициализация через Джаваскрипт, АПИ и т. д.
• Женя Лазарев