Player audio cu playlist

 Script html5 audio player with playlists.
Toti cei care avem un blog,site,forum,sau chiar o simpla pagina pe internet,la un momentdat avem nevoie de un player audio care sa redea anumite melodii pe care le introducem noi in playlistul acestuia. Despre acest player audio cu playlist o sa vorbim in aceasta postare si o sa vedem cum putem sa-l inseram la noi pe blog,site,etc. Acest player este bazat pe html5 si jQuery  v1.7 ( jQuery JavaScript Library v1.7 ).Html5 audio player with playlist.
 Cum pun player audio pe blog,site,etc?

Acum haideti sa vedem cum procedam:

In primul rand ca sa ne mearga playerul corect,intrati în cont de Blogger.com;
Desaign - Editati HTML - Înainte de a va edita sablonul, salvati o copie a acestuia;  
Descarcati sablonul complet;
Apasati (Ctrl+F) si cautati urmatoarea linie de cod:

</head>

 Imediat deasupra acestei linii inserati codul de mai jos:

<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.js'></script>

Dati  Salvare.

Acum pentru adaugarea playerului mergeti la Design;
Elemente de pagina; 
Dati clik pe Adaugati un obiect gadget; 
Din lista care apare alegeti optiunea Html/JavaScript;
Acum Copiati codul de mai jos in campul pentru continut;

Varianta 1.

<script type="text/javascript">
var audio;
var playlist;
var tracks;
var current;

init();
function init(){
    current = 0;
    audio = $('audio');
    playlist = $('#playlist');
    tracks = playlist.find('li a');
    len = tracks.length - 1;
    audio[0].volume = .30;
    audio[0].play();
    playlist.find('a').click(function(e){
        e.preventDefault();
        link = $(this);
        current = link.parent().index();
        run(link, audio[0]);
    });
    audio[0].addEventListener('ended',function(e){
        current++;
        if(current == len){
            current = 0;
            link = playlist.find('a')[0];
        }else{
            link = playlist.find('a')[current];  
        }
        run($(link),audio[0]);
    });
}
function run(link, player){
        player.src = link.attr('href');
        par = link.parent();
        par.addClass('active').siblings().removeClass('active');
        audio[0].load();
        audio[0].play();
}
</script>
<audio id="audio" preload="auto" tabindex="0" controls="controls" type="audio/mpeg">
        <source type="audio/mp3" src="https://adfd6442e93a1a5bef9921e6a48082a93e8d9ace.googledrive.com/host/0B5T2v-Ud3cAdb3Rxb2xKWlZmVzA/Dj_Project_-_Privirea_Ta.mp3">
        Sorry, your browser does not support HTML5 audio.
    </audio>
    <ul id="playlist">
        <li class="active">
  <a href="https://adfd6442e93a1a5bef9921e6a48082a93e8d9ace.googledrive.com/host/0B5T2v-Ud3cAdb3Rxb2xKWlZmVzA/DJ%20Aligator%20-%20Close%20to%20you.mp3">DJ Aligator - Close to you</a></li>
        <li><a href="https://adfd6442e93a1a5bef9921e6a48082a93e8d9ace.googledrive.com/host/0B5T2v-Ud3cAdb3Rxb2xKWlZmVzA/Sting%20-%20Desert%20Rose%20.mp3">Sting - Desert Rose </a></li>
        <li><a href="https://adfd6442e93a1a5bef9921e6a48082a93e8d9ace.googledrive.com/host/0B5T2v-Ud3cAdb3Rxb2xKWlZmVzA/Take%20my%20breath%20away.mp3">Take my breath away</a></li>
    </ul>

Acum puteti modifica tot ce este de culoare rosie.

30 - cu 20,40, ce volum vreti voi sa porneasca;
Si inlocuirea link-uri-lor mp3 cu ale voastre.

Dati save si gata. 

Varianta 2.

La varianta doi procedam la fel ca la varianta unu,decat ca acest cod este mai compact.

<audio id="audio" preload="auto" tabindex="0" controls="controls" type="audio/mpeg">
        <source type="audio/mp3" src="https://adfd6442e93a1a5bef9921e6a48082a93e8d9ace.googledrive.com/host/0B5T2v-Ud3cAdb3Rxb2xKWlZmVzA/Dj_Project_-_Privirea_Ta.mp3">
        Sorry, your browser does not support HTML5 audio.
    </audio>
    <ul id="playlist">
        <li class="active">
  <a href="https://adfd6442e93a1a5bef9921e6a48082a93e8d9ace.googledrive.com/host/0B5T2v-Ud3cAdb3Rxb2xKWlZmVzA/DJ%20Aligator%20-%20Close%20to%20you.mp3">DJ Aligator - Close to you</a></li>
        <li><a href="https://adfd6442e93a1a5bef9921e6a48082a93e8d9ace.googledrive.com/host/0B5T2v-Ud3cAdb3Rxb2xKWlZmVzA/Sting%20-%20Desert%20Rose%20.mp3">Sting - Desert Rose </a></li>
        <li><a href="https://adfd6442e93a1a5bef9921e6a48082a93e8d9ace.googledrive.com/host/0B5T2v-Ud3cAdb3Rxb2xKWlZmVzA/Take%20my%20breath%20away.mp3">Take my breath away</a></li>
    </ul>
<script src="https://3afddcb51550f006546a4dfa49ace7d8e620a908.googledrive.com/host/0B5T2v-Ud3cAdYjlpWkZiRGVLY2s/HTML5%20Audio%20cu%20playlist-Share.js" type="text/javascript"></script>

Aici nu mai ramane decat inlocuirea link-uri-lor mp3 cu ale voastre si auto cu false daca nu doriti sa porneasca automat.

O sa ziceti acum,pai nu e gata,ca playlistul apare sub forma de link-uri,fara nici un aspect,adica asa:

Pai daa. Ca sa avem un aspect frumos la playlist mergem la pagina de design a sabloanelor,vezi imaginea de mai jos:

In meniul din stanga de pe pagina de design a sabloanelor dati clik pe Avansat;
Tragem in jos de scrollbar;
Clik pe Adaugati CSS;

Acum in chenarul din dreapta de culoare alba adaugam urmatorul cod:

#playlist,audio{background:#666;width:400px;padding:0px;}
.active a{color:#5DB0E6;text-decoration:none;}
li a{color:#eeeedd;background:#333;padding:5px;display:block;}
li a:hover{text-decoration:none;}

Dati clik pe butonul Aplicati sablonul in blog,care se afla in partea dreapta sus si gata.
Acum chiar putem spune ca e gata,iar playlistul ne va aparea asa:

Binenteles ca pentru cine doreste se mai poate juca cu setarile CSS-ul-ui.

 Sper sa va fie de ajutor si sa va bucurati de el. Intr-o alta postare o sa vedem cum ne mai putem folosii de acest player si ce modificari ii putem aduce.