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