Жуэль

В платной версии поддерживаются собственные элементы управления. Например, есть у вас трек:

Ilya Birman: News

Можете сделать, чтобы обложка работала как кнопка включения и выключения воспроизведения:

Или поставить в тексте ссылку на определённое время. Или отображать оставшееся до конца время в любом месте: .

При этом не нужно писать никаких скриптов, всё делается чистой разметкой.


Версия 3.0.5

Если аудиофайл оказался недоступен, все контролы ведут себя правильно, плейлисты перестраиваются, а при вызове АПИ не появляются ошибки. Улучшено поведение при нестабильном интернете. Обновлён механизм построения плейлистов: работает корректнее при мешанине из плееров и контролов. Исправлены ошибки подсчёта времени (в том числе, ушли многие мелкие ошибки для треков с дробным числом секунд). Лучше обрабатывается конец трека в разных нестандартных случаях. Исправлена ошибка с показыванием названия трека в контролах. В АПИ добавлен метод getTitle.

Как это работает

Трек — это ссылка на МП3-файл с классом jouele :

<a href="news.mp3" class="jouele">
  Ilya Birman: News
</a>

Элементом управления может стать любой элемент на странице, для этого используется класс jouele-control. Атрибут data-type определяет тип элемента.

Например, чтобы обложка работала как кнопка включения и выключения воспроизведения, используется play-pause:

<img src="..."
  class="jouele-control"
  data-type="play-pause"
/>

В примере выше вокруг обложки во время воспроизведения появляется рамка. Это потому что любой элемент управления треком во время его воспроизведения автоматически получает класс jouele-is-playing, а значит его можно стилизовать:

img.jouele-is-playing {
  outline: rgba(0, 0, 0, .1) 10px solid;
}

Чтобы ссылка вела на время, используется seek:

<a href="#" onclick="return false"
  class="jouele-control"
  data-type="seek"
  data-to="6:34"
>...</a>

Чтобы где-то отображалось время до конца трека, используется time-remaining:

<span
  class="jouele-control"
  data-type="time-remaining"
></span>

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

В документации — о всех типах элементов управления, а также о доступных в бесплатной версии плейлистах, клавиатурном управлении и двух расцветках.

Покупка для вашего сайта

Лицензия на домен  ·  Манибек 30 дней  ·  Бесплатное обновление

Страница скачивания откроется после оплаты. Если что-то пойдёт не так, пишите (адрес внизу).


Илья Бирман
Дизайнер и автор

Евгений Лазарев
Разработчик
Поделиться
Отправить
Запинить