Simple SlideShow

Mega Menu

PullDown menu(exei HTML)

3D icon menu

Τετάρτη 16 Δεκεμβρίου 2015

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

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
02var song;
03var tracker = $('.tracker');
04var volume = $('.volume');
05
06// initialization - first element in playlist
07initAudio($('.playlist li:first-child'));
08
09// set volume
10song.volume = 0.8;
11
12// initialize the volume slider
13volume.slider({
14    range: 'min',
15    min: 1,
16    max: 100,
17    value: 80,
18    start: function(event,ui) {},
19    slide: function(event, ui) {
20        song.volume = ui.value / 100;
21    },
22    stop: function(event,ui) {},
23});
24
25// empty tracker slider
26tracker.slider({
27    range: 'min',
28    min: 0, max: 10,
29    start: function(event,ui) {},
30    slide: function(event, ui) {
31        song.currentTime = ui.value;
32    },
33    stop: function(event,ui) {}
34});
Then, I prepared several general functions to handle with audio:
01function 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
07    $('.player .title').text(title);
08    $('.player .artist').text(artist);
09    $('.player .cover').css('background-image','url(data/' + cover+')');;
10
11    song = new Audio('data/' + url);
12
13    // timeupdate event listener
14    song.addEventListener('timeupdate',function (){
15        var curtime = parseInt(song.currentTime, 10);
16        tracker.slider('value', curtime);
17    });
18
19    $('.playlist li').removeClass('active');
20    elem.addClass('active');
21}
22function playAudio() {
23    song.play();
24
25    tracker.slider("option", "max", song.duration);
26
27    $('.play').addClass('hidden');
28    $('.pause').addClass('visible');
29}
30function stopAudio() {
31    song.pause();
32
33    $('.play').removeClass('hidden');
34    $('.pause').removeClass('visible');
35}
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
05    playAudio();
06});
07
08// pause click
09$('.pause').click(function (e) {
10    e.preventDefault();
11
12    stopAudio();
13});
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
05    stopAudio();
06
07    var next = $('.playlist li.active').next();
08    if (next.length == 0) {
09        next = $('.playlist li:first-child');
10    }
11    initAudio(next);
12});
13
14// rewind click
15$('.rew').click(function (e) {
16    e.preventDefault();
17
18    stopAudio();
19
20    var prev = $('.playlist li.active').prev();
21    if (prev.length == 0) {
22        prev = $('.playlist li:last-child');
23    }
24    initAudio(prev);
25});
Finally, few functions to handle with the playlist:
01// show playlist
02$('.pl').click(function (e) {
03    e.preventDefault();
04
05    $('.playlist').fadeIn(300);
06});
07
08// playlist elements - click
09$('.playlist li').click(function () {
10    stopAudio();
11    initAudio($(this));
12});

Step 4. Images

All used images are packed into one single sprite file: nav.png
HTML5 Audio player sprite image
Live Demo

 

https://www.script-tutorials.com/html5-audio-player-with-playlist/ 

 

Αναρτήθηκε από στις
Ετικέτες ,

Page Navigation

3D Text

O KΩΔΙΚΑΣ HTML:

3D Text ΕΔΩ ΓΡΑΨΕΤΕ ΤΟ ΚΕΙΜΕΝΟ ΣΑΣ

Marquee Text-Icons

Thomasgrm.Blogger.gr

FlashVortex Banner

Tab Widget

ΟΝΟΜΑ ΤΑΒ 1 ΟΝΟΜΑ TΑΒ 2 ΟΝΟΜΑ ΤΑΒ 3
ΕΔΩ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΤΟΥ ΤΑΒ 1
ΕΔΩ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΤΟΥ ΤΑΒ 2
ΕΔΩ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΤΟΥ ΤΑΒ 3

Tab Widget 2

ΟΝΟΜΑ ΤΑΒ 1 ΟΝΟΜΑ TΑΒ 2 ΟΝΟΜΑ ΤΑΒ 3 ΟΝΟΜΑ ΤΑΒ 4
ΕΔΩ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΤΟΥ ΤΑΒ 1
ΕΔΩ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΤΟΥ ΤΑΒ 2
ΕΔΩ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΤΟΥ ΤΑΒ 3
ΕΔΩ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΤΟΥ ΤΑΒ 4

Carousel POST SLIDER

Slideshow

  • ΑΛΟΝΗΣΟΣ-1

    ΑΛΟΝΗΣΟΣ-1

  • ΑΛΟΝΗΣΟΣ-4

    ΑΛΟΝΗΣΟΣ-4

  • ΑΛΟΝΗΣΟΣ-5

    ΑΛΟΝΗΣΟΣ-5

  • ΑΛΟΝΗΣΟΣ-11

    ΑΛΟΝΗΣΟΣ-11

  • ΣΚΙΑΘΟΣ-22

    ΣΚΙΑΘΟΣ-22

  • ΣΚΙΑΘΟΣ-23

    ΣΚΙΑΘΟΣ-23

  • ΣΚΙΑΘΟΣ-1

    ΣΚΙΑΘΟΣ-1

  • ΣΚΙΑΘΟΣ-4

    ΣΚΙΑΘΟΣ-4

  • ΣΚΙΑΘΟΣ-20

    ΣΚΙΑΘΟΣ-20

- See more at: http://gadgetsforblogs1.blogspot.gr/2015/01/slideshow-with-thumbnails.html#more

BACKGROUND SLIDER

Menu Posts Vertical - ACCORDION MENU