Introduction
AudioControls simple lightweight jQuery plugin, helps you to create your own audio player, playlist and additional features.
Features
- Playlist
- Audio Repeat
- Shuffle Playlist
- Repeat Audio
- Repeat Playlist
- Audio Timer (Increment / Decrement)
- Seekable Track
- Buffer Loader & default player controls
- Easy to integrate
- Suitable for maximum themes
- Extended API's and Events
Requirements
- jQuery
- HTML5
Example's
Installation
Include script after the jQuery library (unless you are packaging scripts somehow else):
<script src="/path/to/jquery.audioControls.js"></script>
Do not include the script directly from GitHub (http://raw.github.com/...). The file is being served as text/plain and as such being blocked in Internet Explorer on Windows 7 for instance (because of the wrong MIME type). Bottom line: GitHub is not a CDN.
Data Attributes
Data attributes are heart of this plugin, attributes helps to detect and enables audio controls.
HTML attribute key must be data-attr
<a href="#" class="play" data-attr="playPauseAudio"></a>
This will enable Play and Pause control for the anchor tag.
| Attribute | Description |
| playPauseAudio |
Enables Play, Pause control and activates css class playAudio or pauseAudio vice versa. |
| nextAudio |
Enables next audio control, picks next audio from playlist and returuns disbaled class if there is no next audio from playlist. |
| prevAudio |
Enables previous audio control, picks previous audio from playlist and returuns disbaled class if there is no previous audio from playlist. |
| rangeVolume |
Enables audio volume control, for now attribute support only it comes along with input range element Ex: <input class="bar" data-attr="rangeVolume" type="range" /> |
| repeatSong |
Repeats current audio on done, return class repeatAudio if its active mode. |
| timer |
Enables audio timer either increment or decrement mode |
| seekableTrack |
Enables click event on track which will helps to jump audio positions |
API's and Events
Properties
| Property | Description |
| autoPlay |
Starts playing audio if autoPlay is true Default :true |
| childElements |
Expects HTML tag name where playlist items exists Default :li |
| timer | Refers audio timer mode, possible values area decrement or increment Default :decrement |
| progress | Expects CSS3 selector where progress bar need to be updated Default :.updateProgress |
| buffer | If buffer as true, its start buffering audio even before audio play. Default :true |
| shuffled | If shuffled as true, playlist has suffled on screen load. Default :true |
| audioVolume | Audio volume when initializing the player. It can be between 0.1 to 1 Default :0.5 |
| loopPlaylist | If loopPlaylist as true, playlist starts again from first once all audio completed. Default :true |
Events
For example please check demos
| Event | Description |
| onPlay |
Fires on play button click |
| onPause |
Fires on pause button click |
| onVolumeChange |
Fires on audio volume change |
| onAudioChange |
Fires on every audio change |