Жуэль

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

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

Ilya Birman: News

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

Версия 2.1.2

Работает сильно быстрее, если на странице много аудиотреков. В версии 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"

Посмотрите исходник этой страницы, например.


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

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

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

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

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


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

На Гитхабе.


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

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


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