Жуэль

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

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

Каждая ссылка с классом 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>


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

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

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