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 |