The Pro version supports custom controls. Let’s say you have a track:
You can make the cover play and pause the track:
Or link to a particular time mark from text. Or show the remaining playback time anywhere: .
How it works
A track is a link to an MP3 file with a class
<a href="news.mp3" class="jouele">
Ilya Birman: News
Any element with the class
To make the cover play and pause the track, a
In the above example, a frame appears around the cover during playback. That’s because every track control automatically gets a class
outline: rgba(0, 0, 0, .1) 10px solid;
To make links to time, a seek control is used:
<a href="#" onclick="return false"
To display remaining time, 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.
The documentation covers all control types, and also playlists, keyboard control and two skins, available in the free version.
Designer and developer