Jouele is an audio player for the web. Try it:

Ilya Birman: News

Download zip
check it out on Github

Jouele is powered by jQuery (not included).

Version 3.0.6

Fixes minor problems with time calculation and unstable connection.

Just play a track

Every link with a class jouele will automatically become a player for the linked MP3:

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

See this page’s source for an example.

Customize controls

Any element with the class jouele-control becomes a Jouele control. The attribute data-type specifies the control type.

For example, here is the cover art for the track above:

Cover art

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

<img src="..."

The caption of the image above displays the remaining time during playback. That’s because it is a time-remaining control:


In the same example above, 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;

You can also link to a particular time mark (6:34 in this case). To make links to time marks, a seek control is used:

<a href="#" onclick="return false"

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.


All control types, playlists, keyboard control, and two skins

Ilya Birman
Designer and developer