Жуэль

Жуэль     Эмёрдж     Лайкли

Жуэль — простой и красивый плеер для веба. Попробуйте:

Ilya Birman: News

Жуэль использует Джейплеер и Джейквери (Джейквери не включён в дистрибутив).

Версия 2.2.2

В 2.2 появились плейлисты и глобальное управление пробелом. Добавили data-first в 2.2.1. Начиная с версии 2.1 работает сильно быстрее, если на странице много аудиотреков. В версии 2.0 появился новый внешний вид, упрощённое изменение расцветки, динамическая инициализация, джейквери-плагин и АПИ.


Скачать архив

или возьмите с Гитхаба


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

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

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

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

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

Плеер показывает длину только после начала воспроизведения. Если хотите, чтобы она отображалась сразу, укажите её через атрибут 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 , и чёрные элементы плеера станут белыми:

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

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

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


Расширенная документация

На Гитхабе.


Как заплатить

Плеер бесплатный, но если используете в работе, присылайте деньги сюда:
Биткоины: 12tg2npNuSXjqyW2mHrYf6Tq1LHwnLdPbP
Яндекс-деньги: 41001983702303.
Вебмани: Z296999290045 или R899341354126.


Дизайнер и автор — Илья Бирман
Ведущий разработчик — Евгений Лазарев