Жуэль-про

Жуэль-про

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

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

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

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

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

Дальше
3 комментария
Eugen Gorceac 2018

Жуэль-ю нужен регулятор громкости (очень).

Mr. Vegetable 2018

Без регулятора громкости плеер использовать невозможно.

Я не могу сейчас играть звуки на твоём сайте, потому что уже научился, что если нажать «плей» — то начнёт дико что-то орать, и нужно корчась от шума искать, где же поскорее сделать громкость поменьше. А если кто-то находится рядом, то их это как минимум отвлечёт или будет раздражать, а мне будет неудобно перед ними, что ещё усилит мои страдания.

В других плеерах я сначала убираю громкость на 5-10 процентов перед тем как нажать плей и не боюсь, что моим ушам что-то будет угрожать.
Системная громкость у меня всегда на максимуме и я не хочу её постоянно дёргать, а у каждого источника звука громкость своя, какая ему положена. Не представляю, как можно жить по-другому (ну, конечно, если кто-то тебя специально не насилует плеером без громкости).

Илья Бирман 2018

А у вас Виндоус?

Mr. Vegetable 2018

Да, Виндоус.

Мои книги