Жуэль

Подключение

Добавьте в элемент <head> на странице:

<script src="/путь/к/jquery.js"></script>
<script src="jouele/jouele.js"></script>
<link rel="stylesheet" type="text/css" href="jouele/jouele.css" />

Простое использование

Каждая ссылка с классом jouele превратится в плеер МП3-файла, на который она ведёт:

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

Плеер показывает длину только после начала воспроизведения. Если хотите, чтобы она отображалась сразу, укажите её через атрибут data-length :

class="jouele" data-length="9:54"

Плейлисты

Если вы хотите, чтобы после завершения одного трека начинал играть следующий, сделайте из них плейлист:

<div class="jouele-playlist">
  <p><a href="news.mp3" class="jouele">
    Ilya Birman: News
  </a></p>
  <p><a href="news-remix.mp3" class="jouele">
    Ilya Birman: News (Ninth Of Kin Remix)
  </a></p>
</div>

Чтобы плейлист играл по кругу:

class="jouele-playlist" data-repeat="true"

Класс jouele-playlist можно использовать в html или body  — тогда подряд будет играть всё на странице.

Управление пробелом

Чтобы клавиша пробел включала и выключала воспроизведение, напишите у любого трека, плейлиста или элемента управления:

class="jouele..." data-space-control="true"

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

Если нужно, чтобы при первом нажатии пробела играл определённый трек:

class="jouele..." data-first="true"

Изменение расцветки

Дизайн плеера рассчитан на использование на светлом фоне. Если используете на тёмном фоне, добавьте класс jouele-skin-dark , и чёрные элементы плеера станут белыми:

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

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

В дистрибутиве содержится файл jouele.skin.css, в котором приведён код класса jouele-skin-dark . Сделайте свою расцветку по аналогии, если нужно, и подключите свой ЦСС после дефолтного.

Элементы управления (в платной версии)

С помощью класса jouele-control любой элемент на странице можно сделать элементом управления воспроизведением в плеере. Например, так можно сделать, чтобы обложка включала и выключала трек:

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

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

С помощью атрибута data-href можно привязать элемент управления к конкретному треку:

<img
  src="cover.jpg"
  class="jouele-control"
  data-type="play-pause"
  data-href="news.mp3"
/>

Путь к файлу должен в точности совпадать с тем, который указан в плеере.

Из элементов управления как из запчастей можно собрать свой плеер, например:

Если в элементе управления указан data-href , то отдельного плеера в виде элемента a может вообще не быть, уже одного этого элемента достаточно, чтобы воспроизведение работало.

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

.jouele-sample-player {
  background: #fff;
}
.jouele-sample-player.jouele-is-playing {
  background: #e0e0e0;
}

Доступны следующие элементы управления:

play-pause
По клику включает / выключает воспроизведение.
play
По клику включает воспроизведение, если ещё не.
pause
По клику выключает воспроизведение, если ещё не.
title
Контейнер, в котором будет показано название трека.
time-total
Контейнер, в котором будет показана длительность трека.
time-elapsed
Контейнер, в котором будет показано проигранное время трека.
time-remaining
Контейнер, в котором будет показано оставшееся время трека.
time-toggle
Контейнер, в котором будет показано проигранное время трека. По клику переключается в оставшееся и обратно. Если к одному треку привязано несколько таких элементов, они переключаются одновременно.
timeline
Клики или движение мыши с нажатой кнопкой внутри такого элемента интерпретируются как перемотка в соответствующую позицию трека (по горизонтали). Предполагается, что внутри него будет размещён элемент elapsed, см. далее.
elapsed
Элемент, ширина (свойство width) которого динамически изменяется и соответствует проигранной части трека в процентах. Предполагается, что этот элемент находится внутри элемента timeline и постепенно «закрашивает» его во время воспроизведения.
position
Элемент, положение которого (свойство left) которого динамически изменяется и соответствует проигранной части трека в процентах. Предполагается, что этот элемент находится внутри элемента timeline и постепенно двигается в нём во время воспроизведения. Собственная ширина width этого элемента также учитывается.
seek
Элемент для перемотки трека в определённую позицию и подсветки определённого фрагмента в тексте во время его воспроизведения (ниже есть пример). Если есть атрибут data-to="3:57", по клику переносит на указанное время и начинает воспроизведение (по умолчанию переносит в ноль). Если есть только атрибут data-range="13:57...18:19", по клику переносит на время начала диапазона и начинает воспроизведение. Когда играет кусок трека внутри указанного диапазона, элемент также приобретает класс jouele-is-within, видом которого можно управлять через ЦСС.

Эти элементы приобретают следующие классы в зависимости от статуса воспроизведения связанного с ними трека:

jouele-is-paused
Когда трек не играет, но раньше играл.
jouele-is-playing
Когда трек играет, либо идёт буферизация.
jouele-is-buffering
Когда идёт буферизация (при этом класс jouele-is-playing остаётся).
jouele-is-within
Когда трек находится в позиции внутри диапазона (для контролов seek).
jouele-is-loaded
Когда трек загружен и готов к проигрыванию.
jouele-is-available
Когда трек либо ещё не проигрывался, либо уже проигрывался и точно доступен.
jouele-is-unavailable
Когда трек не удалось воспроизвести.

Пример использования элемета seek

Пусть есть длинный микс из кучи треков. В тексте мы упоминаем один конкретный из них:

<span
  class="jouele-control"
  data-type="seek"
  data-range="13:57…18:19"
>
  Алла Пугачёва: Миллион алых роз
</span>

По клику в этот кусок текста микс автоматически перематывается на позицию 13:57 и начинает играть с неё. Если же микс просто собственным ходом дошёл до отрезка 13:57...18:19, или его пользователь туда перемотал руками, то кусок текста приобретает дополнительно класс jouele-is-within, чтобы его можно было подсвечивать, когда играет именно эта часть. То есть независимо от того, как мы достигли этого диапазона — по клику в текст или иначе — если сейчас играет в нём, то он подсвечивается.


Доступна техническая документация по бесплатной и по платной версиям.


Поделиться
Отправить
Запинить