Lecteur2 play-list, modifié
<p style="opacity: 0.2;">⚫DEBUT CODE</p>
<p> </p>
<p> </p>
<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><!-- ========== definition du lecteur ========== -->
<div id="lecteur" style="height: 150px; width: 60%; background-color: #900; padding: 10px; margin: 0 auto; border-radius: 20px;">
<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; padding-bottom: 10px;">Playlist</div>
</div>
</div>
<div id="curseurhtml-2" style="width: 500px; font-weight: bold; margin: 0px auto; padding: 5px 20px; background-color: #ddd; border: 1px solid #900; border-radius: 10px;"> </div>
<p> </p>
<p> </p>
<p> </p>
<p>
<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.volume = 1 ;
audio.setAttribute("onended","morceausuivant();");
lecteur.appendChild(audio);
document.getElementById("curseurhtml-2").innerHTML="<input type=\"range\" min=\"0\" max=\"1\" step=\"0.1\" value=\"1\" id=\"curseurVolume\">"
var curseurVolume = document.getElementById("curseurVolume");
curseurVolume.onchange = function () {
audio.volume = curseurVolume.value;
}
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.autoplay = false; //audio.controls='true';
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; // *** remplacer true par false pour lecture avec confirmation sur lecteur
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>
</p>
<p style="opacity: 0.2;">⬛FIN CODE</p>
<hr /><!-- ========== FIN DU CODAGE ========= -->