Jouele

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

Ilya Birman: News

Jouele is powered by jPlayer and jQuery (jQuery is not included).

Version 2.2.2

The 2.2 adds playlists and an ability to globally control playback with the Space key. The data-first was added in 2.2.1. Since 2.1 works much faster when multiple audiotracks are used on a page. Earlier in Version 2.0: new look, easier colour customization, dynamic initialization, jQuery plugin and an API.


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/jquery.jplayer.min.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.

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

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.

Playlists

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
  </a></p>
  <p><a href="news-remix.mp3" class="jouele">
    Ilya Birman: News (Ninth Of Kin Remix)
  </a></p>
</div>

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:

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

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 jouele.skin.css 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


Share
Pin

Designed and created by Ilya Birman
Developed by Eugene Lazarev