HTML5 Audio player with playlist
HTML5 audio player. Many of you faced with the task of creating audio player at least once in your life. Quite often , you simply choose one of the available players, often it was the flash player. However, you may have already noticed, that these flash players do not work properly on mobile devices (iPhone / Android). Today I am going to tell you about how to create your own audio player (using HTML5 technology). This player consists of next elements: title, author, cover, basic controls (play / pause, rewind / forward) , two sliders (jQuery UI sliders): volume slider and and a song tracker, and even more: we will also have a playlist with a list of available songs.
Live Demo
I believe that you already know how to create a simple audio player using a standard <audio> element. In our example, we will not use a special markup for this elemet, we will create our own player with all the necessary controls. We will control the player using the event handlers of a created (in JavaScript) audio element.
Step 1. HTML
As usual, we have to include several files in the head section:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="author" content="Script Tutorials" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <title>HTML5 Audio player with playlist | Script Tutorials</title> <!-- add styles and scripts --> <link href="css/styles.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script> <script type="text/javascript" src="js/main.js"></script> </head>
And now, please have a look at our player’s markup:
<div class="player"> <div class="pl"></div> <div class="title"></div> <div class="artist"></div> <div class="cover"></div> <div class="controls"> <div class="play"></div> <div class="pause"></div> <div class="rew"></div> <div class="fwd"></div> </div> <div class="volume"></div> <div class="tracker"></div> </div> <ul class="playlist hidden"> <li audiourl="01.mp3" cover="cover1.jpg" artist="Artist 1">01.mp3</li> <li audiourl="02.mp3" cover="cover2.jpg" artist="Artist 2">02.mp3</li> <li audiourl="03.mp3" cover="cover3.jpg" artist="Artist 3">03.mp3</li> <li audiourl="04.mp3" cover="cover4.jpg" artist="Artist 4">04.mp3</li> <li audiourl="05.mp3" cover="cover5.jpg" artist="Artist 5">05.mp3</li> <li audiourl="06.mp3" cover="cover6.jpg" artist="Artist 6">06.mp3</li> <li audiourl="07.mp3" cover="cover7.jpg" artist="Artist 7">07.mp3</li> </ul>
Looks easy, does not it? As you can see – all the necessary elements are included here.
Step 2. CSS
The time has come to turn our bare HTML model into a beautiful player, for that, we need to define the styles used for each element.
css/styles.css
.example { margin: 50px auto 0; width: 400px; } .player { background: transparent url("../images/spr.png") no-repeat scroll center top; height: 162px; position: relative; width: 326px; z-index: 2; } .title, .artist { font-family: verdana; left: 167px; position: absolute; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } .title { color: #FFFFFF; font-size: 14px; font-weight: bold; top: 23px; } .artist { color: #EEEEEE; font-size: 12px; top: 40px; } .pl { background: transparent url("../images/spr.png") no-repeat scroll -274px -175px; cursor: pointer; height: 34px; left: 270px; position: absolute; top: 20px; width: 32px; } .pl:hover { top: 21px; } .cover { background: transparent url(../data/cover1.jpg) no-repeat scroll center top; border-radius: 5px 5px 5px 5px; height: 94px; left: 20px; position: absolute; top: 20px; width: 94px; } .controls { cursor: pointer; height: 23px; left: 167px; position: absolute; top: 65px; width: 138px; } .controls .play, .controls .pause, .controls .rew, .controls .fwd { background: transparent url("../images/spr.png") no-repeat scroll 0 0; float: left; height: 100%; width: 33%; } .controls .play { background-position: -8px -171px; } .controls .pause { background-position: -8px -198px; display: none; } .controls .rew { background-position: -54px -171px; } .controls .fwd { background-position: -100px -171px; } .controls .play:hover { background-position: -8px -170px; } .controls .pause:hover { background-position: -8px -197px; } .controls .rew:hover { background-position: -54px -170px; } .controls .fwd:hover { background-position: -100px -170px; } .hidden { display: none; } .controls .visible { display: block; } .volume { height: 11px; left: 186px; position: absolute; top: 96px; width: 112px; } .tracker { height: 15px; left: 20px; position: absolute; top: 126px; width: 285px; } .ui-slider-range { background: transparent url("../images/spr.png") no-repeat scroll 5px -222px; height: 100%; position: absolute; top: 0; } .ui-slider-handle { cursor: pointer; height: 10px; margin-left: -5px; position: absolute; top: 2px; width: 10px; z-index: 2; } .volume .ui-slider-handle { background: url("../images/spr.png") no-repeat scroll -201px -188px rgba(0, 0, 0, 0); height: 13px; width: 13px; } .playlist { background-color: #333333; border-radius: 5px 5px 5px 5px; list-style-type: none; margin: -10px 0 0 2px; padding-bottom: 10px; padding-top: 15px; position: relative; width: 326px; z-index: 1; } .playlist li { color: #EEEEEE; cursor: pointer; margin: 0 0 5px 15px; } .playlist li.active { font-weight: bold; }
Step 3. JavaScript
The beautiful player that does nothing – useless. To make it a true work of art, you have to fill it with events and functions. First at all, we need to initialize several variables:
js/main.js
// inner variables var song; var tracker = $('.tracker'); var volume = $('.volume'); // initialization - first element in playlist initAudio($('.playlist li:first-child')); // set volume song.volume = 0.8; // initialize the volume slider volume.slider({ range: 'min', min: 1, max: 100, value: 80, start: function(event,ui) {}, slide: function(event, ui) { song.volume = ui.value / 100; }, stop: function(event,ui) {}, }); // empty tracker slider tracker.slider({ range: 'min', min: 0, max: 10, start: function(event,ui) {}, slide: function(event, ui) { song.currentTime = ui.value; }, stop: function(event,ui) {} });
Then, I prepared several general functions to handle with audio:
function initAudio(elem) { var url = elem.attr('audiourl'); var title = elem.text(); var cover = elem.attr('cover'); var artist = elem.attr('artist'); $('.player .title').text(title); $('.player .artist').text(artist); $('.player .cover').css('background-image','url(data/' + cover+')');; song = new Audio('data/' + url); // timeupdate event listener song.addEventListener('timeupdate',function (){ var curtime = parseInt(song.currentTime, 10); tracker.slider('value', curtime); }); $('.playlist li').removeClass('active'); elem.addClass('active'); } function playAudio() { song.play(); tracker.slider("option", "max", song.duration); $('.play').addClass('hidden'); $('.pause').addClass('visible'); } function stopAudio() { song.pause(); $('.play').removeClass('hidden'); $('.pause').removeClass('visible'); }
And then I started to add event handlers to our control buttons. Play / Pause buttons:
// play click $('.play').click(function (e) { e.preventDefault(); playAudio(); }); // pause click $('.pause').click(function (e) { e.preventDefault(); stopAudio(); });
In order to turn to another song in the playlist, we have to stop playing a current song, pick a next (or previous) object in the playlist, and re-initialize our Audio element. Forward / Rewind buttons:
// forward click $('.fwd').click(function (e) { e.preventDefault(); stopAudio(); var next = $('.playlist li.active').next(); if (next.length == 0) { next = $('.playlist li:first-child'); } initAudio(next); }); // rewind click $('.rew').click(function (e) { e.preventDefault(); stopAudio(); var prev = $('.playlist li.active').prev(); if (prev.length == 0) { prev = $('.playlist li:last-child'); } initAudio(prev); });
Finally, few functions to handle with the playlist:
// show playlist $('.pl').click(function (e) { e.preventDefault(); $('.playlist').fadeIn(300); }); // playlist elements - click $('.playlist li').click(function () { stopAudio(); initAudio($(this)); });
Step 4. Images
All used images are packed into one single sprite file: nav.png
Live Demo
Conclusion
That’s all for today, we have just prepared glorious audio player. Thanks for your patient attention, and if you really like what we done today – share it with all your friends in your social networks using the form below.
Nice Script..
Is there any line of code for play song automatically one by one with out pressing next.. how we will calculate last track..
Hello Reji, try the code I provided here: https://script-tutorials.com/html5-audio-player-with-playlist/#li-comment-307060
The link provided takes be back here. Please advise.
Hi Supong, to download the source package, you need to use one of three social networks (to share and then download)
Really cool!
For WC3 validation purpose, you should maybe change audiourl, cover and artist to data-audiourl, data-cover and data-artist in both index.html and main.js
Hi Manu,
Yes, this is possible – you can use any attributes you want.
Hi! I love your player here. I slightly modified your code here in order to upload songs and play them on your player. I have a problem with that though. When I load the songs into the playlist, the first song plays just fine but when the next songs play, the tracker does not appear and it only appears if i pause then play the track again by clicking the pause & play button. I have updated my jquery, implemented tracker.slider(“option”, “value”, tracker.slider(“value”)); but this problem still happens.
Hi Marienne, the tracker updates it’s value only when ‘playAudio’ function is called. Try to update the tracker when the next song plays.
Hi Andrey,
I am so much glad to get this tutorial from this site. Because few days ago, I got a project what was to build up a custom audio player by using Javascript. But there was no way for me to do it. Really I am not expert on Javascript, so I was finding a detailed tutorial and ultimately I got it. Thanks again for your helpful tutorial.
But now I am facing a problem and that is “I wanna add a Time Left feature in my custom player”. It would be better for me, if you would like to help me in this purpose. I am eagerly waiting for your respond.
Hi, first of all, you will need to update this timer (time left), so, most probably, you will need to create an automatically updated function, where you will use the current time and song.duration to determinate the time left.
Andrey, I also want to add speed button in my custom player. Basically there will be showed a default speed number, which will be added when User click on that button and if they again click on that button then that button speed will be next.
Suggest me please, how can I do it..
You can try to use ‘playbackRate’ to change the speed
player is reaally nice and was no problem to implement, works all browsers. I see answer re autoplay but this so far not working, perhaps I will try again later. Good work. Many thanx.
I cant play my own files. I substitute the HTML with my own files, but they wont play I don’t know where the code need changing. Can you steer my in the right direction?
Try to download and run our sources package, it should work. Then you will change the media files with your own.
Hello,
Thx for this super JS code, I’m trying to use it in my website but i’m block :(
I add playAudio(); at the end of this function to play the next song
- $(‘.playlist li’).click
- $(‘.rew’).click
- $(‘.fwd’).click
and
song.addEventListener(‘ended’, function() {
$(‘.fwd’).click();
});
It’s work for play the next song at the end of the active one.
BUT
the tracker slider doesn’t work for the next song !
I add tracker.slider(‘value’, 0); just after song = new Audio(url); in initAudio
But now, i add an jquery error : TypeError: g is undefined
Can you help me ??
Nice day,
Nicolas
Hi Nicolas, try to debug your JS code. There shouldn’t be any undefined variables, recheck it.
Great player. I’m new to Javascript. Everything is working well. Although when I click the show playlist button the playlist stays open and there is no way of closing it. Can anyone help with some code to close the playlist?
Thanks
Tom
Hi Tom, to add this possibility to close the playlist, you can add a new x element (image/text – it doesn’t matter) into the playlist, and then – bind the following JS code:
// hide playlist
$(‘.close’).click(function (e) {
e.preventDefault();
$(‘.playlist’).fadeOut(300);
});
Nice project!
To comment on this. Another way is to make the show playlist button toggle:
// show playlist
$(‘.pl’).click(function (e) {
e.preventDefault();
if ($(‘.playlist’).is(“:visible”)) {
$(‘.playlist’).fadeOut(300)
} else {
$(‘.playlist’).fadeIn(300);
}
});
Agree, thanks for your example.
Hi,
why is the autoplay solution somebody posted in a comment here only working on desktop?
Thanks,
- Stephan
I saw the code for auto-playing next songs in the older comments, and I’ve tried adding it, but however I try it, it won’t work and the playlist changes to the default and the name of the songs and artists disappear as well. Please, help me?
Hello sir,
I enjoyed your tutorial here on html5 audio play and as a matter of fact there is a small project am presently including the player. But, I have some challenge with the player which I have been able to sort out some.
1. the player does not automatically switch to next song after playing the current song. (that i have resolved)
2. the player volume changes on the next song even when the slider is still on a particular chosen position. (this i have tried but cant resolve it)
So i will need your help on making the volume remain constant on a chosen position, when the next song enters either automatically or by pressing the next button.
Hoping to get your reply.
Thanks.
Hi Alex, probably when we initialize the new Audio, it starts using default volume. To save the volume value, you can add one more global variable, and update it every time we change the volume slider. Then, in ‘initAudio’ function, after ‘new Audio’ you can add the following code:
song.volume = volume;
(where – ‘volume’ is your new variable)
Hi Andrey, thanks for this nice script, I have even re-customize the UI and am loving the auto playlist you posted. but am not good at js yet, so can you please help me. I want to be able to close the playlist after it is opened as well as to add a timer to it whiles it is playing.
Hi Louis, check my answer to Tom, I gave him example how to close the playlist.
I love how simple this is. But is there a way of having multiple instances on a single page?
Hi Dani, you will need to customize the code. Because of the only single instance (with single controls/elements) you will have more elements. You can try to use different unique ID’s and customized code for every player, or you can also try to wrap the player’s code as jQuery library.
Help me please…
how i can hide playlist ??
Hi Tuluss, check my answer to Tom, I gave him example how to close the playlist.