Jouele is a simple and beautiful audio player for the web. Try it:

Ilya Birman: News

Jouele is powered by jQuery (not included).

Version 2.3.4

Since 2.3, Jouele uses Howler (bundled) instead of jPlayer. This change helps use less bandwidth, display the preloader better and get rid of several bugs. The data-repeat feature is now supported on single tracks. When a file is unavailable, Jouele shows this with an icon, instead of just “hanging”. The markup works better in different browsers.

Download zip
check it out on Github

Setup and basic usage

Add the following to the <head> of your page:

<script src="/path/to/jquery.js"></script>
<script src="jouele/jouele.js"></script>
<link rel="stylesheet" type="text/css" href="jouele/jouele.css" />

Every link with a class jouele will automatically become a player for the linked MP3. Have a look at this page’s source code, and you’ll see.

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

Player shows track length only when playback starts. If you want it to be displayed when a page opens, specify if with the data-length attribute:

class="jouele" data-length="9:54"

Have a look at this page’s source for an example.


To make several tracks on a page play one after another, make them a playlist:

<div class="jouele-playlist">
  <p><a href="news.mp3" class="jouele">
    Ilya Birman: News
  <p><a href="news-remix.mp3" class="jouele">
    Ilya Birman: News (Ninth Of Kin Remix)

To loop a playlist:

class="jouele-playlist" data-repeat="true"

The class jouele-playlist can be used on html or body . This will make all tracks on a page play continuosly.

Controlling playback with the Space key

To make the Space key play and pause the playback, add this to any track or playlist:

class="jouele" data-space-control="true"

The Space key will no longer scroll the page and will control playback. If nothing is playing, pressing Space will continue playback from where it finished (or start the first track on the page). If something is playing, pressing Space will pause it. This is so regardless of where this attribute is used.

To make a specific track play first:

class="jouele" data-first="true"

Changing the look

The player is designed for use on a light background. If you have a dark background, add the class jouele-skin-dark , and the black elemets will become white:

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

You can use the class on any of the predecessors, and it will apply to all the copies of the player within that predecessor.

In the package, there is a file that contains the code for the class jouele-skin-dark . Use it as an example to to create your custom theme and link your CSS to the page after the default one.

More documentation

See Github.

How to pay

It’s free, but Bitcoin tips are welcome at 12tg2npNuSXjqyW2mHrYf6Tq1LHwnLdPbP


Designed and created by Ilya Birman
Developed by Eugene Lazarev