Lecteur1 play-list modifié
<div class="container-fluid">
<div class="blocLecteur" style="width: 400px; height: 300px; border: 10px double #59a6a1; border-radius: 20px; margin-left: auto; margin-right: auto; text-align: center; padding: 30px; background-color: #fee;">
<div id="Divlecteur"> </div>
<p style="margin-bottom: 0px; text-align: center;"> <span style="font-size: 16pt;">↓ PlayList ↓</span></p>
<select id="liste" style="margin-left: 4px; width: 320px; height: 150px; color: #000080; font-size: 18px; border: 5px ridge #cdcdcd; border-radius: 10px; padding: 10px;" onclick="joue(this.value);" name="liste" size="3">
<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>
<option class="opGreen" 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 (bis)</option>
<option value="http://ekladata.com/55RzqZNYFh3ofp9Bs2TO8khbv7A/01-19-Harden-My-Heart.mp3">Quarterflash - Harden My Heart (bis)</option>
<option value="http://ekladata.com/STCoOl-KeJl0DWbrPhFc__i0e-o/01-01-Narcotic-Radio-Edit.mp3">Liquido - Narcotic (bis)</option>
</select><!-- commande volume en % pas à pas -->
<p><span style="font-size: 12pt;"><strong><span style="color: #3366ff;">volume<span class="emoji-1F50A"> </span> </span></strong><a class="stick" onclick="volume('mysong', 0)">0%</a>   <a class="stick" onclick="volume('mysong', 0.25)">25%</a>   <a class="stick" onclick="volume('mysong', 0.35)">35%</a>   <a class="stick" onclick="volume('mysong', 0.5)">50%</a>   <a class="stick" onclick="volume('mysong', 0.75)">75%</a>   <a class="stick" onclick="volume('mysong', 1)">100%</a></span></p>
<p> </p>
</div>
</div>
<p> </p>
<p>- </p>
<p>
<script>// <![CDATA[
var lecteur = document.createElement("AUDIO");
lecteur.id="mysong";
lecteur.src =document.getElementById("liste").value;
document.getElementById('Divlecteur').appendChild(lecteur);
var morceau = document.getElementById("mysong");
morceau.controls='true';
morceau.controlsList="nodownload";
morceau.autoplay = false; // initialement true
morceau.load();
morceau.onended = function() {
var nbr=document.getElementById("liste").length;
chanson= Math.floor(Math.random() * (nbr));
while (document.getElementById("mysong").src==document.getElementById("liste")[chanson].value)
{chanson= Math.floor(Math.random() * (nbr));}
document.getElementById("liste").selectedIndex = chanson;
document.getElementById("mysong").src=document.getElementById("liste")[chanson].value;
document.getElementById("mysong").autoplay = false; // ⭐ initialement true pour lecture aléatoire
document.getElementById("mysong").load();
}
function joue(musique) {
document.getElementById("mysong").src=musique;
document.getElementById("mysong").autoplay = false; // ⭐ true initialement pour départ automatique
document.getElementById("mysong").load();
}
window.onload = function(){
var nbr=document.getElementById("liste").length;
chanson= Math.floor(Math.random() * (nbr));
document.getElementById("liste").selectedIndex = chanson;
document.getElementById("mysong").src=document.getElementById("liste")[chanson].value;
document.getElementById("mysong").load();
}
// ]]></script>
</p>
<style><!--
audio {
border: 1px solid #f00;
padding: 4px 4px;
border-radius: 30px;
background-color: #f5ecd0;
}
select option {color: #333; height: 24px;}
select option:focus {color: #003; height: 24px;}
.opGreen {color: green; }
.opGeorgia {font-family: georgia, palatino;}
--></style>
<p> </p>
<p>
<script>// <![CDATA[
// fonction agissant sur le volume selon clic d'appel
function volume(idPlayer, vol) {
var player = document.querySelector('#' + idPlayer);
player.volume = vol;
}
// ]]></script>
</p>
<style><!--
span.emoji-1F50A:after {content: "\1F50A"; font-size: 24px;}
--></style>
<!-- Fin code lecteur Juke-Box --><hr/>
<p>-</p>