Jouele

The Pro version supports custom controls. Let’s say you have a track:

Ilya Birman: News

$ 39

  • One license per domain name
  • 30-day moneyback
  • Free updates forever

 

Domain name:

You can make the cover play and pause the track:

Or link to a particular time mark from text. Or show the remaining playback time anywhere: .

No JavaScript is required for this, everything is done in markup.

How it works

A track is a link to an MP3 file with a class jouele :

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

Any element with the class jouele-control is a Jouele control. The attribute data-type denotes the control type.

To make the cover play and pause the track, a play-pause control is used:

<img src="..."
  class="jouele-control"
  data-type="play-pause"
/>

In the above example, a frame appears around the cover during playback. That’s because every track control automatically gets a class jouele-is-playing during playback, as so we can style it:

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

To make links to time, a seek control is used:

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

To display remaining time, a time-remaining control is used:

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

If there are several players on a page, the controls control the one that was playing previously, or the first one on the page, if nothing was playing before. You can link the controls to a particular player.

The documentation covers all control types, and also playlists, keyboard control and two skins, available in the free version.


Ilya Birman
Designer and developer
Share
Pin