Jouele

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

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


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:

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

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


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

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


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"
  class="jouele-control"
  data-type="seek"
  data-to="6:34"
>...</a>


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.

Documentation

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