Le Code

<div class="container-fluid row "> <div class="col-md-4" style="padding-top: 35px;"><select id="liste" onclick="joue(this.value);" name="liste"> <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> <div id="Divlecteur" class="col-md-6"> </div> </div> <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 = 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 = true; document.getElementById("mysong").load(); } function joue(musique) { document.getElementById("mysong").src=musique; document.getElementById("mysong").autoplay = true; 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>

Explication

Je crée la playlist dans une balise select (ligne 3 du code). A chaque option de cette balise, on indique l'url du morceau (propriété value) Et son nom. Vous pouvez mettre autant de lignes que vous le souhaitez. Je crée ensuite une div qui a l'id "Divlecteur". Celle-ci ne me servira qu'à y insérer la balise audio. En effet, l'éditeur d'Eklablog ne permettant pas cette balise, je vais la créer en javascript. Le script (lignes 11 a 14) crée la balise et lui donne l'id "mysong". En ligne 13, on lit la première valeur du selectet on l'affecte à la propriété src de la balise audio. Lignes 15 à 18, on ajoute les contrôles (volume, play/pause etc.) et on lance automatiquement le morceau (autoplay à true). Tout cela lance le premier morceau. Ensuite, lorsque vous choisissez un autre morceau dans la liste, la fonction "joue" est appelée, charge le morceau et le lance. Ce tuto a été réalisé en quelques minutes. J'essaierai de le compléter ultérieurement. En cas de questions, un mp et je vous répondrai.

Suite à une demande, j'ai ajouté une fonction de lecture aléatoire (Lignes 19 à 28).