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

Ilya Birman: News

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

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="..."

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"

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


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