Custom Audio Player with Jquery Audio Controls Plugin
Wall Script
Wall Script
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; }
web notification

44 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. very nice. thanks

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

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

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

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

    ReplyDelete
  9. 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
  10. its very useful and awesome article
    thank you :)

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

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

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

    ReplyDelete
  14. 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
  15. I made Live Radio Audio Player Streaming Player your tutorials help me lot to do this. Thanks bro.

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

    Thank you sir..

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

    ReplyDelete
  18. 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
  19. Is this meant to be an audio player that plays/works or a "gui" interface to add an audio player too?

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

    ReplyDelete
  21. 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
  22. Really nice post very helpful for me. i used it in a music website.

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

    ReplyDelete
  24. 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
  25. @Arun may If have plug this in my site then how I can refresh playlist ?

    ReplyDelete
  26. 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
  27. This was something I had been searching for! Thank you so much for sharing.

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

    ReplyDelete
  29. 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
  30. i am having trouble getting a stream to play in this player. is it supported? how can make it work?

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

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

    ReplyDelete
  33. Nice post... it is so useful for me. Tell me please, can i reinitialize your plugin after an event on my js code

    ReplyDelete
  34. It 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.

    ReplyDelete
  35. Hello Player is good

    right 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"

    ReplyDelete

mailxengine Youtueb channel
Make in India
X