HTML5 Audio player with playlist

HTML5 Audio player with playlist

161 403370
HTML5 Audio player with playlist
HTML5 Audio player with playlist

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

[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:

<!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

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.

SIMILAR ARTICLES


161 COMMENTS

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

  2. Hi Supong, to download the source package, you need to use one of three social networks (to share and then download)

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

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

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

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

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

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

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

  10. 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);
        }
        });

  11. Hi,
    why is the autoplay solution somebody posted in a comment here only working on desktop?
    Thanks,
    – Stephan

  12. 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?

  13. 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)

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

Leave a Reply to Dani Cancel reply