Home » Tutorials

HTML5 Audio player with playlist

Tutorials
Author Reading 12 min Views 3.3k. Published by Modified by

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.

Contents
  1. Step 1. HTML
  2. Step 2. CSS
  3. css/styles.css
  4. Step 3. JavaScript
  5. js/main.js
  6. Step 4. Images
  7. Conclusion
Live Demo

[sociallocker]

download the sources

[/sociallocker]

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:

01 <!DOCTYPE html>
02 <html lang="en">
03 <head>
04     <meta charset="utf-8" />
05     <meta name="author" content="Script Tutorials" />
06     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
07     <title>HTML5 Audio player with playlist | Script Tutorials</title>
08     <!-- add styles and scripts -->
09     <link href="css/styles.css" rel="stylesheet" type="text/css" />
10     <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
11     <script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
12     <script type="text/javascript" src="js/main.js"></script>
13 </head>

And now, please have a look at our player’s markup:

01 <div class="player">
02     <div class="pl"></div>
03     <div class="title"></div>
04     <div class="artist"></div>
05     <div class="cover"></div>
06     <div class="controls">
07         <div class="play"></div>
08         <div class="pause"></div>
09         <div class="rew"></div>
10         <div class="fwd"></div>
11     </div>
12     <div class="volume"></div>
13     <div class="tracker"></div>
14 </div>
15 <ul class="playlist hidden">
16     <li audiourl="01.mp3" cover="cover1.jpg" artist="Artist 1">01.mp3</li>
17     <li audiourl="02.mp3" cover="cover2.jpg" artist="Artist 2">02.mp3</li>
18     <li audiourl="03.mp3" cover="cover3.jpg" artist="Artist 3">03.mp3</li>
19     <li audiourl="04.mp3" cover="cover4.jpg" artist="Artist 4">04.mp3</li>
20     <li audiourl="05.mp3" cover="cover5.jpg" artist="Artist 5">05.mp3</li>
21     <li audiourl="06.mp3" cover="cover6.jpg" artist="Artist 6">06.mp3</li>
22     <li audiourl="07.mp3" cover="cover7.jpg" artist="Artist 7">07.mp3</li>
23 </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

001 .example {
002     margin: 50px auto 0;
003     width: 400px;
004 }
005 .player {
006     background: transparent url("../images/spr.png") no-repeat scroll center top;
007     height: 162px;
008     position: relative;
009     width: 326px;
010     z-index: 2;
011 }
012 .title, .artist {
013     font-family: verdana;
014     left: 167px;
015     position: absolute;
016     -moz-user-select: none;
017     -webkit-user-select: none;
018     -ms-user-select: none;
019 }
020 .title {
021     color: #FFFFFF;
022     font-size: 14px;
023     font-weight: bold;
024     top: 23px;
025 }
026 .artist {
027     color: #EEEEEE;
028     font-size: 12px;
029     top: 40px;
030 }
031 .pl {
032     background: transparent url("../images/spr.png") no-repeat scroll -274px -175px;
033     cursor: pointer;
034     height: 34px;
035     left: 270px;
036     position: absolute;
037     top: 20px;
038     width: 32px;
039 }
040 .pl:hover {
041     top: 21px;
042 }
043 .cover {
044     background: transparent url(../data/cover1.jpg) no-repeat scroll center top;
045     border-radius: 5px 5px 5px 5px;
046     height: 94px;
047     left: 20px;
048     position: absolute;
049     top: 20px;
050     width: 94px;
051 }
052 .controls {
053     cursor: pointer;
054     height: 23px;
055     left: 167px;
056     position: absolute;
057     top: 65px;
058     width: 138px;
059 }
060 .controls .play, .controls .pause, .controls .rew, .controls .fwd {
061     background: transparent url("../images/spr.png") no-repeat scroll 0 0;
062     float: left;
063     height: 100%;
064     width: 33%;
065 }
066 .controls .play {
067     background-position: -8px -171px;
068 }
069 .controls .pause {
070     background-position: -8px -198px;
071     display: none;
072 }
073 .controls .rew {
074     background-position: -54px -171px;
075 }
076 .controls .fwd {
077     background-position: -100px -171px;
078 }
079 .controls .play:hover {
080     background-position: -8px -170px;
081 }
082 .controls .pause:hover {
083     background-position: -8px -197px;
084 }
085 .controls .rew:hover {
086     background-position: -54px -170px;
087 }
088 .controls .fwd:hover {
089     background-position: -100px -170px;
090 }
091 .hidden {
092     display: none;
093 }
094 .controls .visible {
095     display: block;
096 }
097 .volume {
098     height: 11px;
099     left: 186px;
100     position: absolute;
101     top: 96px;
102     width: 112px;
103 }
104 .tracker {
105     height: 15px;
106     left: 20px;
107     position: absolute;
108     top: 126px;
109     width: 285px;
110 }
111 .ui-slider-range {
112     background: transparent url("../images/spr.png") no-repeat scroll 5px -222px;
113     height: 100%;
114     position: absolute;
115     top: 0;
116 }
117 .ui-slider-handle {
118     cursor: pointer;
119     height: 10px;
120     margin-left: -5px;
121     position: absolute;
122     top: 2px;
123     width: 10px;
124     z-index: 2;
125 }
126 .volume .ui-slider-handle {
127     background: url("../images/spr.png") no-repeat scroll -201px -188px rgba(0, 0, 0, 0);
128     height: 13px;
129     width: 13px;
130 }
131 .playlist {
132     background-color: #333333;
133     border-radius: 5px 5px 5px 5px;
134     list-style-type: none;
135     margin: -10px 0 0 2px;
136     padding-bottom: 10px;
137     padding-top: 15px;
138     position: relative;
139     width: 326px;
140     z-index: 1;
141 }
142 .playlist li {
143     color: #EEEEEE;
144     cursor: pointer;
145     margin: 0 0 5px 15px;
146 }
147 .playlist li.active {
148     font-weight: bold;
149 }

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

01 // inner variables
02 var song;
03 var tracker = $('.tracker');
04 var volume = $('.volume');
05 // initialization - first element in playlist
06 initAudio($('.playlist li:first-child'));
07 // set volume
08 song.volume = 0.8;
09 // initialize the volume slider
10 volume.slider({
11     range: 'min',
12     min: 1,
13     max: 100,
14     value: 80,
15     start: function(event,ui) {},
16     slide: function(event, ui) {
17         song.volume = ui.value / 100;
18     },
19     stop: function(event,ui) {},
20 });
21 // empty tracker slider
22 tracker.slider({
23     range: 'min',
24     min: 0, max: 10,
25     start: function(event,ui) {},
26     slide: function(event, ui) {
27         song.currentTime = ui.value;
28     },
29     stop: function(event,ui) {}
30 });

Then, I prepared several general functions to handle with audio:

01 function initAudio(elem) {
02     var url = elem.attr('audiourl');
03     var title = elem.text();
04     var cover = elem.attr('cover');
05     var artist = elem.attr('artist');
06     $('.player .title').text(title);
07     $('.player .artist').text(artist);
08     $('.player .cover').css('background-image','url(data/' + cover+')');;
09     song = new Audio('data/' + url);
10     // timeupdate event listener
11     song.addEventListener('timeupdate',function (){
12         var curtime = parseInt(song.currentTime, 10);
13         tracker.slider('value', curtime);
14     });
15     $('.playlist li').removeClass('active');
16     elem.addClass('active');
17 }
18 function playAudio() {
19     song.play();
20     tracker.slider("option", "max", song.duration);
21     $('.play').addClass('hidden');
22     $('.pause').addClass('visible');
23 }
24 function stopAudio() {
25     song.pause();
26     $('.play').removeClass('hidden');
27     $('.pause').removeClass('visible');
28 }

And then I started to add event handlers to our control buttons. Play / Pause buttons:

01 // play click
02 $('.play').click(function (e) {
03     e.preventDefault();
04     playAudio();
05 });
06 // pause click
07 $('.pause').click(function (e) {
08     e.preventDefault();
09     stopAudio();
10 });

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:

01 // forward click
02 $('.fwd').click(function (e) {
03     e.preventDefault();
04     stopAudio();
05     var next = $('.playlist li.active').next();
06     if (next.length == 0) {
07         next = $('.playlist li:first-child');
08     }
09     initAudio(next);
10 });
11 // rewind click
12 $('.rew').click(function (e) {
13     e.preventDefault();
14     stopAudio();
15     var prev = $('.playlist li.active').prev();
16     if (prev.length == 0) {
17         prev = $('.playlist li:last-child');
18     }
19     initAudio(prev);
20 });

Finally, few functions to handle with the playlist:

01 // show playlist
02 $('.pl').click(function (e) {
03     e.preventDefault();
04     $('.playlist').fadeIn(300);
05 });
06 // playlist elements - click
07 $('.playlist li').click(function () {
08     stopAudio();
09     initAudio($(this));
10 });

Step 4. Images

All used images are packed into one single sprite file: nav.png

HTML5 Audio player sprite image

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.

Rate article
© 2026 Script Tutorials