Жуэль
Подключение
Добавьте в элемент <head> на странице:
<script src="/путь/к/
<script src="jouele/
<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, чтобы его можно было подсвечивать, когда играет именно эта часть. То есть независимо от того, как мы достигли этого диапазона — по клику в текст или иначе — если сейчас играет в нём, то он подсвечивается.
Разработчикам
В Гитхабе — техническая документация по Джаваскриптовому АПИ.