Get new jQuery plugins just once a week
May 21, 2013
Audio Player | Responsive and Touch-Friendly jQuery plugin
Audio Player is jQuery plugin that replaces <audio> element with a little of custom HTML code that enables indirect styling of <audio> element.
It has got the following features:-
To achieve this, full responsibility falls on your CSS. My example is responsive. You can have a non-responsive player as well, but that is not recommended. Responsiveness is an important sign of a good web experience.
Touchableness is an important sign of a good web experience as well. Having these two, you are device and screen independent. And that is a half job done!
When the browser does not support the audio element entirely or any of the provided audio files, the player then gracefully degrades to a one-button (Play/Pause buttons only)
The player is in no way directly native. The plugin accepts audio element’s attributes (
preoload) and tags (
<source>). Besides that, “autoplay” and “loop” attributes are inherited on the previously mentioned fallback case.
The essential Play / Pause and playback progress controls, Volume On / Off / Up / Down controls and indication of how much of the audio is preloaded (buffered).
This depends on your CSS as well. The looks of my player is all CSS, not a single image file used. Having that and sizing everything with
em units, enables the player to be scaled and zoomed.
So long, Flash. You are unwanted here.
Created by Osvaldas Valutis
Responsive and Touch-Friendly
Sign up for our weekly newsletter.