Introducing the new jquery AudioControls plugin for custom web HTML5 audio players, this helps you to make fastest audio player system for your web projects. This plugin actually works with HTML5 <audio> tag, create your own player design and just apply plugin data attributes to the HTML elements. First version supports basic audio controls, we are going to improve this in future Thanks!
Download Script 
Live Demo 1 Live Demo 2Developer
Arun Kumar Sekar
Engineer, Plugin Expert
Chennai, INDIA
Engineer, Plugin Expert
Chennai, INDIA
HTML Code
Contains HTML code, we layout divided into seven horizontal parts.
<div class="containerPlayer">
<div id="listContainer" class="playlistContainer"></div>
<div id="playerContainer">
<ul class="controls"></ul>
<div class="audioDetails"></div>
<div class="progress"></div>
<div class="volumeControl"></div>
</div>
</div>
<div id="listContainer" class="playlistContainer"></div>
<div id="playerContainer">
<ul class="controls"></ul>
<div class="audioDetails"></div>
<div class="progress"></div>
<div class="volumeControl"></div>
</div>
</div>
Playlist
This contains songs with unorder list tag using data-src.
<ul id="playListContainer">
<li data-src="songs/rolling-in-the-deep-adele.mp3">
<a href="#">Adele - Rolling In The Deep</a>
</li>
<li data-src="songs/when-i-was-your-man-bruno-mars.mp3">
<a href="#">Bruno - When I Was Your Man</a>
</li>
</ul>
<li data-src="songs/rolling-in-the-deep-adele.mp3">
<a href="#">Adele - Rolling In The Deep</a>
</li>
<li data-src="songs/when-i-was-your-man-bruno-mars.mp3">
<a href="#">Bruno - When I Was Your Man</a>
</li>
</ul>
Controls
Audion controls just use the plugin data attributes for actions. Click here for more information.
<ul class="controls">
<li><a href="#" class="shuffle shuffleActive" data-attr="shuffled"></a></li>
<li><a href="#" class="left" data-attr="prevAudio"></a></li>
<li><a href="#" class="play" data-attr="playPauseAudio"></a></li>
<li><a href="#" class="right" data-attr="nextAudio"></a></li>
<li><a href="#" class="repeat" data-attr="repeatSong"></a></li>
</ul>
<li><a href="#" class="shuffle shuffleActive" data-attr="shuffled"></a></li>
<li><a href="#" class="left" data-attr="prevAudio"></a></li>
<li><a href="#" class="play" data-attr="playPauseAudio"></a></li>
<li><a href="#" class="right" data-attr="nextAudio"></a></li>
<li><a href="#" class="repeat" data-attr="repeatSong"></a></li>
</ul>
Audio Details
Song information like title and time based on data-attr="timer" response.
<div class="audioDetails">
<span class="songPlay"></span>
<span data-attr="timer" class="audioTime"></span>
</div>
<span class="songPlay"></span>
<span data-attr="timer" class="audioTime"></span>
</div>
Progress Bar
Progress bar works with data-attr="seekableTrack"
<div class="progress">
<div data-attr="seekableTrack" class="seekableTrack"></div>
<div class="updateProgress"></div>
</div>
<div data-attr="seekableTrack" class="seekableTrack"></div>
<div class="updateProgress"></div>
</div>
Volume Control
<div class="volumeControl">
<div class="volume volume1"></div>
<input class="bar" data-attr="rangeVolume" type="range" min="0" max="1" step="0.1" value="0.7" />
</div>
<div class="volume volume1"></div>
<input class="bar" data-attr="rangeVolume" type="range" min="0" max="1" step="0.1" value="0.7" />
</div>
JavaScript
Contains javascipt code. $("#playListContainer").audioControls(function(){}- playListContainer is the ID name of the songs list DIV tag.
<script src="jquery.js"></script>
<script src="jquery.audioControls.js"></script>
<script>
$(document).ready(function()
{
$("#playListContainer").audioControls(
{
autoPlay : false,
timer: 'increment',
onAudioChange : function(response){
$('.songPlay').text(response.title + ' ...'); //Song title information
},
onVolumeChange : function(vol){
var obj = $('.volume');
if(vol <= 0){
obj.attr('class','volume mute');
}
else if(vol <= 33)
{
obj.attr('class','volume volume1');
}
else if(vol > 33 && vol <= 66)
{
obj.attr('class','volume volume2');
}
else if(vol > 66)
{
obj.attr('class','volume volume3');
}
else
{
obj.attr('class','volume volume1');
}
}
});
});
</script>
<script src="jquery.audioControls.js"></script>
<script>
$(document).ready(function()
{
$("#playListContainer").audioControls(
{
autoPlay : false,
timer: 'increment',
onAudioChange : function(response){
$('.songPlay').text(response.title + ' ...'); //Song title information
},
onVolumeChange : function(vol){
var obj = $('.volume');
if(vol <= 0){
obj.attr('class','volume mute');
}
else if(vol <= 33)
{
obj.attr('class','volume volume1');
}
else if(vol > 33 && vol <= 66)
{
obj.attr('class','volume volume2');
}
else if(vol > 66)
{
obj.attr('class','volume volume3');
}
else
{
obj.attr('class','volume volume1');
}
}
});
});
</script>
CSS
#listContainer { width:310px; background-color:#fafafa; }
#listContainer ul { background-color: #fafafa; clear: both; cursor: pointer; }
#listContainer li { padding:10px; }
#playerContainer { width:310px; height:130px; background-color:#333333; }
.controls li:first{margin-right:10px}
.controls li { float:left; display:inline-block; width:50px; text-align:center; margin-top:8px;margin-left:10px }
.progress { clear:both; height:4px; background-color:#666666; width:100%; cursor:pointer; position:relative; }
.progress .updateProgress { width:0px; background-color:#00BD9B; height:100%; float:left; position:relative; }
.volumeControl { position: relative; margin: 8px auto; }
.volumeControl .updateProgress { display:inline-block; vertical-align:middle; margin-top:2px; }
input[type="range"] { -webkit-appearance: none; -moz-appearance: none; background-color: #00BD9B; height: 2px; }
#listContainer ul { background-color: #fafafa; clear: both; cursor: pointer; }
#listContainer li { padding:10px; }
#playerContainer { width:310px; height:130px; background-color:#333333; }
.controls li:first{margin-right:10px}
.controls li { float:left; display:inline-block; width:50px; text-align:center; margin-top:8px;margin-left:10px }
.progress { clear:both; height:4px; background-color:#666666; width:100%; cursor:pointer; position:relative; }
.progress .updateProgress { width:0px; background-color:#00BD9B; height:100%; float:left; position:relative; }
.volumeControl { position: relative; margin: 8px auto; }
.volumeControl .updateProgress { display:inline-block; vertical-align:middle; margin-top:2px; }
input[type="range"] { -webkit-appearance: none; -moz-appearance: none; background-color: #00BD9B; height: 2px; }
I have done same customization with jPlayer in one of my site, http://tourworthy.com.
ReplyDeleteTwo demos are awesome, one issue in second demo that, when I shuffle off, next or prev button not working properly. I am using Firefox 38 on Centos.
its very useful and nice article :)
ReplyDeletevery nice. thanks
ReplyDeleteCheck, There is a broken link in the controls part of this article.
ReplyDeleteVery nice indeed. Except for one thing: In demo 2 I would like to have a PLAY button when I hear no song, and a PAUSE button when a song is playing. How can I fix this?
ReplyDeleteGreat code. But I have a problem: Using the NEXT button de songs play in a strange order. Reversed alphabetical or something. Can you help me to fix this?
ReplyDelete@Jeffrey, configure shuffled as false
ReplyDelete@Jeffrey, you have onPlay and onPause callbacks do what ever you want
ReplyDeleteDocumentation URL : http://arunkumarsekar.github.io/audioControls/
ReplyDeletegood code
DeleteThis is what i was looking for. I am working on a projects that heavily includes sounds. And this plugin will help me a lot.
ReplyDeleteThank You Arun
its very useful and awesome article
ReplyDeletethank you :)
Great Arun for this Code .It's working fine for me
ReplyDeleteAwesome
ReplyDeleteInformation provided is very useful and beneficial. It is also very useful for my blog
ReplyDeleteThanks Bro for share code. Very Helpful.
ReplyDeleteThis is what i was looking for. I am working on a projects that heavily includes sounds. And this plugin will help me a lot.
ReplyDeleteI made Live Radio Audio Player Streaming Player your tutorials help me lot to do this. Thanks bro.
ReplyDeleteUseful information.Now I am going to apply it to make my own player
ReplyDeleteThank you sir..
very good website according to me/...
ReplyDeleteThis is what i was looking for. I am working on a projects that heavily includes sounds. And this plugin will help me a lot.
ReplyDeleteThank You Arun
Is this meant to be an audio player that plays/works or a "gui" interface to add an audio player too?
ReplyDeleteThanks for the wonderful tutorial
DeleteHow to wrap the playlist into a table, because if I try the player doesn't work anymore?
ReplyDeleteHow to wrap the playlist items into a table instead of the unordered list. And is there a way to play audio from a url that is a mp3 file but doesn't end with .mp3 (e.g. the stream url from soundcloud tracks)
ReplyDeleteReally nice post very helpful for me. i used it in a music website.
ReplyDeleteThanks for sharing knowledge. This is great tool and working perfectly. :)
ReplyDeleteGood tutorial man. But in your demo, play button pauses the song and pause button plays the song. It is suppose to be reverse way.
ReplyDeletehow to refresh playlist?
ReplyDelete@Arun may If have plug this in my site then how I can refresh playlist ?
ReplyDeletea version for blogger please
ReplyDeleteThanks for this useful codes. I am really noob in such coding and i am now copying your coding Hehe. Bdw do these work out with the hosting without php latest version or we need latest javascript? i hope it works. let me give it a try.
ReplyDeleteThis was something I had been searching for! Thank you so much for sharing.
ReplyDeleteIt's not play or auto play when click or loaded :(
ReplyDeleteHow to make Re-initializing if for example dynamically added a new track in a playlist? Or how to add new tracks to the index?
ReplyDeletehow to pause audio
ReplyDeleteGood Thanks to it.
ReplyDeletei am having trouble getting a stream to play in this player. is it supported? how can make it work?
ReplyDeleteYou Provide Very Useful Information Thanks to This.
ReplyDeleteas it does to put a scroll bar to put as much music as you want?
ReplyDeleteNice post... it is so useful for me. Tell me please, can i reinitialize your plugin after an event on my js code
ReplyDeleteIt a nice code. Thank you for your code it very useful. But when I click button next or previous button it jump to the top, how can i fix it to stay the same play. Thank you for your answer.
ReplyDeletehow to use it for an online stream?
ReplyDeleteHello Player is good
ReplyDeleteright now it's playing random song how to i plage with particular order (sequence as per i listing )
data-src="1.mp3"
data-src="2.mp3"
data-src="3.mp3"