Code du projet HTML/CSS et Javascript Séparés

Retrouvez ci-dessous les codes HTML/CSS et Javascript pour obtenir ce résultat. Vous pouvez les éditer sur CodePen pour faire des tests.

See the Pen Untitled by Papasti (@Papasti) on CodePen.

Code du projet complet

Retrouvez ci-dessous le code utilisé dans cette page.

On crée tout d'abord notre playlist constituée par les <option> du<select> (ligne 1 à 11). La propriété value de l'option correspond au lien vers le morceau choisi. Puis on ajoute le titre avant de refermer <option>. Vous pouvez mettre autant de titres que vous voulez.

De la ligne 12 à la ligne 28, cela correspond aux différentes <div> qui vont servir à l'affichage du lecteur. J'ai intégré directement les couleurs dans ces div mais comme elles disposent toutes d'une id, vous pouvez modifier ces couleurs via du css.

Concernant la partie <script>, c'est le moteur qui permet  le fonctionnement du lecteur. (play/pause, morceau suivant, etc.)

Amusez vous bien.

<select id="liste" style="display: none;" name="liste"> <option value="http://ekladata.com/ArW8bXhvYUtCVSN2BhNdv4guljY/01-04-Drive.mp3">The Cars - Drive</option> <option value="http://ekladata.com/qtUDLa6s-6C9nPHRT4IwV36dXgE/01-07-Burning-Heart.mp3">Survivor - Burning Heart</option> <option value="http://ekladata.com/HEfCjrJMOesskGWZdyCPIHsQSdU/01-08-Change.mp3">Tears for Fears - Change</option> <option value="http://ekladata.com/uQ9L9rqPxTbZGVd2fFwcXsKRN4E/01-14-Sealed-With-A-Kiss-1.mp3">Bobby Vinton - Sealed with a kiss</option> <option value="http://ekladata.com/_cAu6McC-L-cKS9YYkIHMqitwkg/02-01-It-s-A-Heartache.mp3">Bonnie Tyler - It's a Heartache</option> <option value="http://ekladata.com/pJlD9BN5arcAubGxdPwzGfzC8KY/11-08-A-View-To-A-Kill.mp3">Duran Duran - A View to a Kill</option> <option value="http://ekladata.com/s9WE0GxdCSPgDKngEVeXNA6ELzs/01-01-Promise-Me.mp3">Beverley Craven - Promise me</option> <option value="http://ekladata.com/55RzqZNYFh3ofp9Bs2TO8khbv7A/01-19-Harden-My-Heart.mp3">Quarterflash - Harden My Heart</option> <option value="http://ekladata.com/STCoOl-KeJl0DWbrPhFc__i0e-o/01-01-Narcotic-Radio-Edit.mp3">Liquido - Narcotic</option> </select> <div id="lecteur" style="height: 150px; width: 60%; background-color: #333; padding: 15px; margin: 0 auto; border-radius: 8px;"> <div id="zonegauche" style="float: left; width: 49%; background-color: #3c3c3c; display: inline-block; height: 150px;"> <div id="titre" style="width: 100%; height: 25px; background-color: white;">Titre chanson</div> <div id="divcanvas" style="backgroud-color: black; width: 100%; height: 100px;"> </div> <div id="divcontroles" style="width: 100%; height: 25px; background-color: #3c3c3c; overflow: hidden;"> <div id="divsvgprevious" style="width: 25px; height: 25px; float: left; background-color: #3c3c3c; overflow: hidden;"> </div> <div id="divsvgplay" style="width: 25px; height: 25px; float: left; background-color: #3c3c3c; overflow: hidden;"> </div> <div id="divsvgpause" style="width: 25px; height: 25px; float: left; background-color: #3c3c3c; overflow: hidden;"> </div> <div id="divsvgnext" style="width: 25px; height: 25px; float: left; background-color: #3c3c3c; overflow: hidden;"> </div> <div id="infos" style="color: white; float: right;"> </div> </div> </div> <div id="centre" style="width: 1%; color: white; display: inline-block; overflow: auto; height: 150px; background-color: #333;"> </div> <div id="playlist" style="width: 49%; color: white; display: inline-block; overflow: auto; height: 150px;"> <div style="position: sticky; top: 0; background-color: #333; border-radius: 5px;">Playlist</div> </div> </div> <script>// <![CDATA[ setTimeout(function() { $("divcanvas").innerHTML=""; var canvas=document.createElement("CANVAS"); canvas.id="canvas"; canvas.style.width="100%"; canvas.style.height="100px"; $("divcanvas").appendChild(canvas); // Bouton precedent $("divsvgprevious").innerHTML=""; var lecture=document.createElementNS("http://www.w3.org/2000/svg", "svg"); var poly0=document.createElementNS("http://www.w3.org/2000/svg", "polygon"); var poly0a=document.createElementNS("http://www.w3.org/2000/svg", "polygon"); lecture.id="previous"; lecture.style.height="25px"; lecture.setAttribute("onclick","morceauprecedent();"); poly0.setAttribute("points", "20,5 20,20 10,12"); poly0.setAttribute("style", "fill:lightgrey;stroke:white;stroke-width:1"); poly0a.setAttribute("points", "15,5 15,20 5,12"); poly0a.setAttribute("style", "fill:lightgrey;stroke:white;stroke-width:1"); $("divsvgprevious").appendChild(lecture); $("previous").appendChild(poly0); $("previous").appendChild(poly0a); // Bouton play $("divsvgplay").innerHTML=""; var lecture=document.createElementNS("http://www.w3.org/2000/svg", "svg"); var poly1=document.createElementNS("http://www.w3.org/2000/svg", "polygon"); lecture.id="play"; lecture.style.height="25px"; lecture.setAttribute("onclick","playpause();"); poly1.setAttribute("points", "5,5 5,20 20,12"); poly1.setAttribute("style", "fill:lightgrey;stroke:white;stroke-width:1"); $("divsvgplay").appendChild(lecture); $("play").appendChild(poly1); // Bouton pause $("divsvgpause").innerHTML=""; var lecture=document.createElementNS("http://www.w3.org/2000/svg", "svg"); var poly2=document.createElementNS("http://www.w3.org/2000/svg", "rect"); var poly3=document.createElementNS("http://www.w3.org/2000/svg", "rect"); lecture.id="pause"; lecture.style.height="25px"; lecture.setAttribute("onclick","playpause();"); poly2.setAttribute("x", "5"); poly2.setAttribute("y", "5"); poly2.setAttribute("width", "5"); poly2.setAttribute("height", "15"); poly2.setAttribute("style", "fill:lightgrey;stroke:white;stroke-width:1"); poly3.setAttribute("x", "15"); poly3.setAttribute("y", "5"); poly3.setAttribute("width", "5"); poly3.setAttribute("height", "15"); poly3.setAttribute("style", "fill:lightgrey;stroke:white;stroke-width:1"); $("divsvgpause").style.width="0px"; $("divsvgpause").appendChild(lecture); $("pause").appendChild(poly2); $("pause").appendChild(poly3); // Bouton suivant $("divsvgnext").innerHTML=""; var lecture=document.createElementNS("http://www.w3.org/2000/svg", "svg"); var poly4=document.createElementNS("http://www.w3.org/2000/svg", "polygon"); var poly5=document.createElementNS("http://www.w3.org/2000/svg", "polygon"); lecture.id="next"; lecture.style.height="25px"; lecture.setAttribute("onclick","morceausuivant();"); poly4.setAttribute("points", "5,5 5,20 15,12"); poly4.setAttribute("style", "fill:lightgrey;stroke:white;stroke-width:1"); poly5.setAttribute("points", "10,5 10,20 20,12"); poly5.setAttribute("style", "fill:lightgrey;stroke:white;stroke-width:1"); $("divsvgnext").appendChild(lecture); $("next").appendChild(poly4); $("next").appendChild(poly5); var lecteur=document.getElementById("lecteur"); var audio=document.createElement("AUDIO"); audio.id="audio"; audio.src = document.getElementById("liste")[0].value; audio.setAttribute("onended","morceausuivant();"); lecteur.appendChild(audio); var nbr=document.getElementById("liste").length; var listemorceaux=document.createElement("OL"); listemorceaux.style.backgroundColor="rgb(60, 60, 60)"; $("playlist").appendChild(listemorceaux); var i; for (i = 0; i < nbr; i++) { var playlist=document.createElement("LI"); playlist.id=document.getElementById("liste")[i].innerHTML; playlist.innerHTML=document.getElementById("liste")[i].innerHTML; playlist.setAttribute("onmouseover","this.style.backgroundColor = 'white';this.style.color = 'black';this.style.cursor = 'default';"); playlist.setAttribute("onmouseleave","this.style.backgroundColor = '#3c3c3c';this.style.color = 'white';"); playlist.setAttribute("onclick","jouemorceau(this.innerHTML);"); listemorceaux.appendChild(playlist); } $('titre').innerHTML=document.getElementById("liste")[0].innerHTML; $('titre').style.color="#333"; $('titre').style.backgroundColor="white"; //audio.controls='true'; audio.autoplay = false; audio.load(); audio.onloadedmetadata = function(){infos();}; audio.ontimeupdate = function(){infos();}; } ,1000); function jouemorceau(elem){ var nbr=document.getElementById("liste").length; var i; for (i = 0; i < nbr; i++) { if (document.getElementById("liste")[i].innerHTML==elem){ var audio=$("audio"); audio.src=document.getElementById("liste")[i].value; $('titre').innerHTML=elem; audio.autoplay = true; audio.load(); $("divsvgpause").style.width="25px"; $("divsvgplay").style.width="0px"; } } infos(); } function playpause(){ var audio=$("audio"); if (audio.paused) { audio.play(); $("divsvgpause").style.width="25px"; $("divsvgplay").style.width="0px";} else{ audio.pause(); $("divsvgpause").style.width="0px"; $("divsvgplay").style.width="25px"; }; } function morceauprecedent(){ var nbr=document.getElementById("liste").length; var i; var pos; for (i = 0; i < nbr; i++) { if ($('titre').innerHTML == document.getElementById("liste")[i].innerHTML) { if (i==0){pos=nbr-1;}else{pos=i-1;} jouemorceau(document.getElementById("liste")[pos].innerHTML);break; } } } function morceausuivant(){ var nbr=document.getElementById("liste").length; var i; var pos; for (i = 0; i < nbr; i++) { if ($('titre').innerHTML == document.getElementById("liste")[i].innerHTML) { if (i==nbr-1){pos=0;}else{pos=i+1;} jouemorceau(document.getElementById("liste")[pos].innerHTML);break; } } } function infos(){ var time0=$('audio').currentTime; var minutes0 = Math.floor(time0 / 60); var seconds0 = Math.floor(time0 - minutes0 * 60); var time=$('audio').duration; var minutes = Math.floor(time / 60); var seconds = Math.floor(time - minutes * 60); $('infos').innerText=minutes0+":"+seconds0+"/"+minutes+":"+seconds; } // ]]></script>