HTML5 Audio Player

FEATURES

Responsive The player works on multiple platforms.
Extremely easy to use Setup in less than 3 minutes.
Fully skinnable The appearance is fully customizable with CSS.
Multiple instances The player can be included multiple times on the same page.
Diversity There are 6 different themes included.
Highly compatible The CSS is highly compatible with your site's existing code.

Autoplay support The audio should start playing as soon as it is ready.
Loop support The audio should start over again, when it is finished.
Fully customizable Almost all control buttons can easily be turn on or off.
Automatically save volume state The volume will be saved with local storage or cookies.
Flash fallback Support for legacy browsers with an automatic Flash fallback.
Universal compatibility Firefox 2+, Safari 2+, Chrome 1+, Opera 9+, IE7+.

DEMOS

This example enables all the controls.
This example disables the time view.
This example disables the time and duration view.
This example disables all the controls.
This example has no audio source.

OPTIONS

Attribute	Properties	Description
autoplay	boolean	Specifies whether or not to start playing the audio as soon as the audio has loaded. This attribute is a boolean attribute. Therefore, the mere presence of this attribute equates to a true value.
data-controls-duration	string - Default: true	Specifies if the audio duration should be visiable. Set to true or false.
data-controls-time	string - Default: true	Specifies if the current audio time should be visiable. Set to true or false.
data-controls-volume	string - Default: true	Specifies if the volume controls should be visiable. Set to true or false.
data-fallback	string - Default: audio-player.swf	Specifies the URL of the Flash (SWF) file that will handle the fallback for older browsers. If the SWF file is not in the same folder as your html page. You can change the URL path with this attribute.
data-volume	number - Default: 100	Specifies the volume of the audio. The volume ranges from 0 (silent) to 100 (full volume). Setting this attribute will override the volume that was saved.
height	number - Default: 29	Specify the height of the audio player. The value is set in pixels (px).
loop	boolean	Specifies that the audio should start over again, when it is finished. This attribute is a boolean attribute. Therefore, the mere presence of this attribute equates to a true value.
preload	string - Default: auto	Specifies whether the audio should be preloaded or not, and if so, how it should be preloaded. Set to auto , metadata or none. I strongly recommended that you always set this attribute to none, for optimal page loading speed.
width	number - Default: 300	Specify the width of the audio player. The value is set in pixels (px).

Function	Method	Description
destroy	destroy():void	This method undoes all modifications done by the HTML5AudioPlayer initialization method. You basically call it when you want to "unload" the audio-player from the specified audio element.
initialization	HTML5AudioPlayer():Object	Sometimes you don't want the audio-player to be setup on page load. In this case, when you initially build your <audio> element (in HTML or JavaScript) you should not add the "HTML5AudioPlayer" class to it. When you are ready to show the audio you then call this method.
play	play( DOM Element \| String ):void	Starts playing the video. Optinaly you can pass a <audio> DOM element to play, or it's id. Set it to null (or omit this parameter) if you want to resume playback of a paused audio file. Default is null.
pause	pause():void	Pauses the playing audio file.
volume	volume( Number ):Number	Set or get the volume of the audio.

//Create the audio player
$('#audio_id').HTML5AudioPlayer();
//Destroy the audio player
$('#audio_id').HTML5AudioPlayer('destroy');
//Pause the audio
$('#audio_id').HTML5AudioPlayer('pause');
//Play the audio
$('#audio_id').HTML5AudioPlayer('play');
//Set the volume
$('#audio_id').HTML5AudioPlayer('volume', 75);
//Get the volume
var volume = $('#audio_id').HTML5AudioPlayer('volume');