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

Ilya Birman: News

Скачать архив
или возьмите с Гитхаба

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


Версия 3.0.6

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

Просто вставить трек

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

<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"
/>

В подписи под обложкой во время воспроизведения отображается оставшееся время — это благодаря элементу управления типа time-remaining:

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

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

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

Ещё можно поставить в тексте ссылку на определённое время в треке (здесь это 6:34). Чтобы ссылка вела на время, используется seek:

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

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

Документация

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



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

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