Custom Audio Player with Jquery Audio Controls Plugin
Wall Script
Follow Me:
Wednesday, May 20, 2015

Custom Audio Player with Jquery Audio Controls Plugin

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!

Custom Audio Player with Jquery Audio Controls Plugin


Download Script     Live Demo 1     Live Demo 2

Developer
Arun Kumar Sekar
Arun Kumar Sekar

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>

Custom Audio Player with Jquery Audio Controls Plugin

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>

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>

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>

Progress Bar
Progress bar works with data-attr="seekableTrack"
<div class="progress">
<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>

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>

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; }
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


39 comments:

  1. I have done same customization with jPlayer in one of my site, http://tourworthy.com.


    Two 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.

    ReplyDelete
  2. its very useful and nice article :)

    ReplyDelete
  3. very nice. thanks

    ReplyDelete
  4. Check, There is a broken link in the controls part of this article.

    ReplyDelete
  5. Very 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?

    ReplyDelete
  6. Great 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
  7. @Jeffrey, configure shuffled as false

    ReplyDelete
  8. @Jeffrey, you have onPlay and onPause callbacks do what ever you want

    ReplyDelete
  9. Documentation URL : http://arunkumarsekar.github.io/audioControls/

    ReplyDelete
  10. This is what i was looking for. I am working on a projects that heavily includes sounds. And this plugin will help me a lot.
    Thank You Arun

    ReplyDelete
  11. its very useful and awesome article
    thank you :)

    ReplyDelete
  12. Great Arun for this Code .It's working fine for me

    ReplyDelete
  13. Information provided is very useful and beneficial. It is also very useful for my blog

    ReplyDelete
  14. Thanks Bro for share code. Very Helpful.

    ReplyDelete
  15. This is what i was looking for. I am working on a projects that heavily includes sounds. And this plugin will help me a lot.

    ReplyDelete
  16. I made Live Radio Audio Player Streaming Player your tutorials help me lot to do this. Thanks bro.

    ReplyDelete
  17. Useful information.Now I am going to apply it to make my own player

    Thank you sir..

    ReplyDelete
  18. very good website according to me/...

    ReplyDelete
  19. This is what i was looking for. I am working on a projects that heavily includes sounds. And this plugin will help me a lot.
    Thank You Arun

    ReplyDelete
  20. Is this meant to be an audio player that plays/works or a "gui" interface to add an audio player too?

    ReplyDelete
  21. How to wrap the playlist into a table, because if I try the player doesn't work anymore?

    ReplyDelete
  22. How 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)

    ReplyDelete
  23. Really nice post very helpful for me. i used it in a music website.

    ReplyDelete
  24. Thanks for sharing knowledge. This is great tool and working perfectly. :)

    ReplyDelete
  25. Good tutorial man. But in your demo, play button pauses the song and pause button plays the song. It is suppose to be reverse way.

    ReplyDelete
  26. @Arun may If have plug this in my site then how I can refresh playlist ?

    ReplyDelete
  27. Thanks 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.

    ReplyDelete
  28. This was something I had been searching for! Thank you so much for sharing.

    ReplyDelete
  29. It's not play or auto play when click or loaded :(

    ReplyDelete
  30. How to make Re-initializing if for example dynamically added a new track in a playlist? Or how to add new tracks to the index?

    ReplyDelete
  31. i am having trouble getting a stream to play in this player. is it supported? how can make it work?

    ReplyDelete
  32. You Provide Very Useful Information Thanks to This.

    ReplyDelete
  33. as it does to put a scroll bar to put as much music as you want?

    ReplyDelete

Make in India