Simple HTML5 Audio Player 1.0.0

The audio player jQuery plugin let's you easily add audio to your web pages.

Features

  • Lightweight The packed javascript weighs only 15kb.
  • 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 5 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.
  • Automaticly 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

  1. This example enables all the controls.
  2. This example disables the time view.
  3. This example disables the time and duration view.
  4. This example disables all the controls.
  5. This example has no audio source.

How to use

1. Unzip the purchased file from CodeCanyon. Open up the "deploy" folder.

2. Copy the "AudioPlayerV1.js" file, "AudioPlayerV1.swf" file, "jquery.ui.widget.min.js" file, and the Theme folder you have chosen to your project folder.

3. Open your HTML document and include the "AudioPlayerV1.js" file into your document. The code below loads jQuery from Google, but you can include your own copy instead if you want. You also need to include the jquery.ui.widget.min.js and the CSS file of the theme you have chosen. You can put this code anywhere in your HTML page, but we recommend you put it inside the <head> tag. If you have multiple music files on the same page, you only need to add this code once.

  1. <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  2. <script type="text/javascript" src="YOUR_PATH/jquery.ui.widget.min.js"></script>
  3. <script type="text/javascript" src="YOUR_PATH/AudioPlayerV1.js"></script>

  4. <link rel="stylesheet" type="text/css" href="YOUR_PATH/blue/style.css" />

4. For every audio player you want to add to your page, you need a proper <audio> tag with the class attribute set to AudioPlayerV1. When the page is loaded, the player will automatically look for all the <audio> elements with the AudioPlayerV1 class and take care of the rest. Make sure you have both a MP3 and OGG version of your audio. This will ensure you have cross browser compatibility. Here is how a basic <audio> element should look:

  1. <audio class="AudioPlayerV1" preload="none">
  2.       <source type="audio/mpeg" src="sounds/preview.mp3" />
  3.       <source type="audio/ogg" src="sounds/preview.ogg" />
  4. </audio>

Documentation

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: AudioPlayerV1.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).