HTML5 Audio participant with playlist

HTML5 audio participant. Lots of you confronted with the duty of making audio participant no less than as soon as in your life. Very often , you merely select one of many obtainable gamers, typically it was the flash participant. Nonetheless, you could have already seen, that these flash gamers don’t work correctly on cellular gadgets (iPhone / Android). Immediately I’m going to let you know about the best way to create your personal audio participant (utilizing HTML5 expertise). This participant consists of subsequent parts: title, creator, cowl, fundamental controls (play / pause, rewind / ahead) , two sliders (jQuery UI sliders): quantity slider and and a tune tracker, and much more: we can even have a playlist with an inventory of obtainable songs.

[sociallocker]

[/sociallocker]

I imagine that you just already know the best way to create a easy audio participant utilizing a regular <audio> factor. In our instance, we won’t use a particular markup for this elemet, we are going to create our personal participant with all the mandatory controls. We are going to management the participant utilizing the occasion handlers of a created (in JavaScript) audio factor.

Step 1. HTML

As common, now we have to incorporate a number of recordsdata within the head part:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta identify="author" content material="Script Tutorials" />
    <meta identify="viewport" content material="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title>HTML5 Audio participant with playlist | Script Tutorials</title>
    <!-- add types and scripts -->
    <hyperlink href="css/styles.css" rel="stylesheet" sort="text/css" />
    <script sort="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script sort="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
    <script sort="text/javascript" src="js/main.js"></script>
</head>

And now, please take a look at our participant’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" cowl="cover1.jpg" artist="Artist 1">01.mp3</li>
    <li audiourl="02.mp3" cowl="cover2.jpg" artist="Artist 2">02.mp3</li>
    <li audiourl="03.mp3" cowl="cover3.jpg" artist="Artist 3">03.mp3</li>
    <li audiourl="04.mp3" cowl="cover4.jpg" artist="Artist 4">04.mp3</li>
    <li audiourl="05.mp3" cowl="cover5.jpg" artist="Artist 5">05.mp3</li>
    <li audiourl="06.mp3" cowl="cover6.jpg" artist="Artist 6">06.mp3</li>
    <li audiourl="07.mp3" cowl="cover7.jpg" artist="Artist 7">07.mp3</li>
</ul>

Seems to be straightforward, doesn’t it? As you’ll be able to see – all the mandatory parts are included right here.

See also  Helping with Birth Complications in Sheep and Goats

Step 2. CSS

The time has come to show our naked HTML mannequin into a gorgeous participant, for that, we have to outline the types used for every factor.

css/types.css

.instance {
    margin: 50px auto 0;
    width: 400px;
}
.participant {
    background: clear url("../images/spr.png") no-repeat scroll heart prime;
    top: 162px;
    place: relative;
    width: 326px;
    z-index: 2;
}
.title, .artist {
    font-family: verdana;
    left: 167px;
    place: absolute;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.title {
    shade: #FFFFFF;
    font-size: 14px;
    font-weight: daring;
    prime: 23px;
}
.artist {
    shade: #EEEEEE;
    font-size: 12px;
    prime: 40px;
}
.pl {
    background: clear url("../images/spr.png") no-repeat scroll -274px -175px;
    cursor: pointer;
    top: 34px;
    left: 270px;
    place: absolute;
    prime: 20px;
    width: 32px;
}
.pl:hover {
    prime: 21px;
}
.cowl {
    background: clear url(../knowledge/cover1.jpg) no-repeat scroll heart prime;
    border-radius: 5px 5px 5px 5px;
    top: 94px;
    left: 20px;
    place: absolute;
    prime: 20px;
    width: 94px;
}
.controls {
    cursor: pointer;
    top: 23px;
    left: 167px;
    place: absolute;
    prime: 65px;
    width: 138px;
}
.controls .play, .controls .pause, .controls .rew, .controls .fwd {
    background: clear url("../images/spr.png") no-repeat scroll 0 0;
    float: left;
    top: 100%;
    width: 33%;
}
.controls .play {
    background-position: -8px -171px;
}
.controls .pause {
    background-position: -8px -198px;
    show: 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 {
    show: none;
}
.controls .seen {
    show: block;
}
.quantity {
    top: 11px;
    left: 186px;
    place: absolute;
    prime: 96px;
    width: 112px;
}
.tracker {
    top: 15px;
    left: 20px;
    place: absolute;
    prime: 126px;
    width: 285px;
}
.ui-slider-range {
    background: clear url("../images/spr.png") no-repeat scroll 5px -222px;
    top: 100%;
    place: absolute;
    prime: 0;
}
.ui-slider-handle {
    cursor: pointer;
    top: 10px;
    margin-left: -5px;
    place: absolute;
    prime: 2px;
    width: 10px;
    z-index: 2;
}
.quantity .ui-slider-handle {
    background: url("../images/spr.png") no-repeat scroll -201px -188px rgba(0, 0, 0, 0);
    top: 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;
    place: relative;
    width: 326px;
    z-index: 1;
}
.playlist li {
    shade: #EEEEEE;
    cursor: pointer;
    margin: 0 0 5px 15px;
}
.playlist li.lively {
    font-weight: daring;
}

Step 3. JavaScript

The gorgeous participant that does nothing – ineffective. To make it a real murals, you must fill it with occasions and features. First in any respect, we have to initialize a number of variables:

See also  Learn XD Prototyping

js/fundamental.js

    // inside variables
    var tune;
    var tracker = $('.tracker');
    var quantity = $('.quantity');
    // initialization - first factor in playlist
    initAudio($('.playlist li:first-child'));
    // set quantity
    tune.quantity = 0.8;
    // initialize the amount slider
    quantity.slider({
        vary: 'min',
        min: 1,
        max: 100,
        worth: 80,
        begin: operate(occasion,ui) {},
        slide: operate(occasion, ui) {
            tune.quantity = ui.worth / 100;
        },
        cease: operate(occasion,ui) {},
    });
    // empty tracker slider
    tracker.slider({
        vary: 'min',
        min: 0, max: 10,
        begin: operate(occasion,ui) {},
        slide: operate(occasion, ui) {
            tune.currentTime = ui.worth;
        },
        cease: operate(occasion,ui) {}
    });

Then, I ready a number of normal features to deal with with audio:

    operate initAudio(elem) {
        var url = elem.attr('audiourl');
        var title = elem.textual content();
        var cowl = elem.attr('cowl');
        var artist = elem.attr('artist');
        $('.participant .title').textual content(title);
        $('.participant .artist').textual content(artist);
        $('.participant .cowl').css('background-image','url(knowledge/' + cowl+')');;
        tune = new Audio('knowledge/' + url);
        // timeupdate occasion listener
        tune.addEventListener('timeupdate',operate (){
            var curtime = parseInt(tune.currentTime, 10);
            tracker.slider('worth', curtime);
        });
        $('.playlist li').removeClass('lively');
        elem.addClass('lively');
    }
    operate playAudio() {
        tune.play();
        tracker.slider("option", "max", tune.period);
        $('.play').addClass('hidden');
        $('.pause').addClass('seen');
    }
    operate stopAudio() {
        tune.pause();
        $('.play').removeClass('hidden');
        $('.pause').removeClass('seen');
    }

After which I began so as to add occasion handlers to our management buttons. Play / Pause buttons:

    // play click on
    $('.play').click on(operate (e) {
        e.preventDefault();
        playAudio();
    });
    // pause click on
    $('.pause').click on(operate (e) {
        e.preventDefault();
        stopAudio();
    });

With a purpose to flip to a different tune within the playlist, now we have to cease taking part in a present tune, choose a subsequent (or earlier) object within the playlist, and re-initialize our Audio factor. Ahead / Rewind buttons:

    // ahead click on
    $('.fwd').click on(operate (e) {
        e.preventDefault();
        stopAudio();
        var subsequent = $('.playlist li.lively').subsequent();
        if (subsequent.size == 0) {
            subsequent = $('.playlist li:first-child');
        }
        initAudio(subsequent);
    });
    // rewind click on
    $('.rew').click on(operate (e) {
        e.preventDefault();
        stopAudio();
        var prev = $('.playlist li.lively').prev();
        if (prev.size == 0) {
            prev = $('.playlist li:last-child');
        }
        initAudio(prev);
    });

Lastly, few features to deal with with the playlist:

    // present playlist
    $('.pl').click on(operate (e) {
        e.preventDefault();
        $('.playlist').fadeIn(300);
    });
    // playlist parts - click on
    $('.playlist li').click on(operate () {
        stopAudio();
        initAudio($(this));
    });

Step 4. Pictures

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

See also  Fire Emblem: The Sacred Stones

HTML5 Audio player sprite image

Conclusion

That’s all for right this moment, now we have simply ready wonderful audio participant. Thanks on your affected person consideration, and in case you actually like what we completed right this moment – share it with all your pals in your social networks utilizing the shape under.

Leave a Reply

Your email address will not be published.