Jouele is an amazing audio player for the web. It was built to look simple and beautiful, and to use a simple and beautiful declarative API. With Jouele, you write code like this:
<a href="ilya-birman-use-me-mix.mp3" class="jouele">
Ilya Birman: Use Me (DJ Mix)
</a>
And you get a player like this:
Playlists, repeating and keyboard control were gradually added in the recent years. But we wanted Jouele to be even more advanced and versatile. And we didn’t want to sacrifice the declarative nature of Jouele’s APIs.
So we came up with something great: Jouele Pro with custom controls. Let me tell you about it.
What you can do with Jouele Pro
I’ve recently started publishing interactive playlists for my DJ mixes. You can click the cover art to start and pause playback. You can click a track’s name, and the mix will jump to that track. And the currently playing track gets automatically highlighted in the playlist when the playback reaches it.
Try it before reading on.
The magic is that neither the cover art, nor the playlist are a part of the Jouele user interface. The are just part of the page, layed out the way I want. But they gain their special abilities by using Jouele Pro’s declarative API.
So I have a player inserted with the code above, by using the CSS class jouele on an HTML a element. And I want the cover image to initiate and pause playback.
Here’s what I do:
<img
src="cover.jpg"
class="jouele-control"
data-type="play-pause"
/>
That’s it. Now, when you click this image, the mix starts to play.
And to make the playlist items clickable, I do this:
<tr class="jouele-control"
data-type="seek" data-to="0:45:38"
>
<td>0:45:38</td>
<td>Tensal</td>
<td>Achievement 3</td>
</tr>
Now when you click on a track’s name, you go directly to it in the mix.
I also want the cover art to look somehow “active” when the music is playing. Here’s what I do in CSS:
img.jouele-is-playing {
outline: rgba(255, 255, 255, .2) 10px solid;
}
That’s it. Jouele Pro dynamically sets the class jouele-is-playing on each of its controls during playback, so the cover art highlighting now works. No JavaScript needed.
The same way the highlighting of the currently playing playlist item works. The actual HTML code for each playlist item is this:
<tr class="jouele-control"
data-type="seek" data-range="0:45:38...0:48:55"
>
<td>0:45:38</td>
<td>Tensal</td>
<td>Achievement 3</td>
</tr>
This line is not just to jump to a point in time, but it also corresponds to a time range. To dynamically highlight it, I use this CSS:
tr.jouele-is-within {
background: rgba(255, 255, 255, .2);
color: #fd0093;
}
That’s it. Jouele sets the class jouele-is-within to all its range controls when the playback is within this range.
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.
Jouele Pro is $39 per domain name. The free Jouele is available as before.
Links:
