problèmes avec une playlist

zougui
Javascript

Bonjour,

Voila je rencontre un petit problème avec mon code.

je créé une playlist avec une lecture en boucle de tout les titres.

je fait en sorte de ne voir que la piste audio de la musique en cours de lecture, et d'avoir une liste des musiques en dessous de la piste audio avec en rouge la musique en cours de lecture et en blanc les autres musiques

CODE HTML

<!DOCTYPE html>
<HTML>

    <head>
        <link rel="stylesheet" href="lecteur_test.css">
        <meta charset="utf-8" />
        <title>
        lecteur
        </title>
        <style>

        li#audio {display:none;}
        li#audio:first-of-type {display:block;}

        li#list {color:white;}
        li#list:first-of-type {color:red;}

        </style>
    </head>

    <body>

        <ul id="playlist">
            <li id="audio">
                <figure id="audioplayer" itemprop="track" itemscope itemtype="http://schema.org/MusicRecording" >
                    <figcaption>
                        <div id="track">Track
                            <span itemprop="name">ANUBIS
                            </span>
                        </div>
                        <br>
                        <div id="artist">Artist
                            <span itemprop="byArtist">YOUTUNE
                            </span>
                        </div>
                        <br>
                        <div id="time">Time
                            <span id="playbacktime">00:00
                            </span>
                        </div>
                    </figcaption>
                    <meta itemprop="duration" content="PT2M29S">
                    <div id="fader">
                    </div>
                    <div id="playback">
                    </div>
                    <audio controls id="audiotrack" preload="auto" itemprop="audio">
                        <source src="audio/06.mp3"/>
                    </audio>
                </figure>
            </li>

            <li id="audio">
                <figure id="audioplayer" itemprop="track" itemscope itemtype="http://schema.org/MusicRecording" >
                    <figcaption>
                        <div id="track">Track
                            <span itemprop="name">CHEB PRINCE 2  LÉ LÉ LA!!!
                            </span>
                        </div>
                        <br>
                        <div id="artist">Artist
                            <span itemprop="byArtist">SOFIANE SMILE
                            </span>
                        </div>
                        <br>
                        <div id="time">Time
                            <span id="playbacktime">00:00
                            </span>
                            </div>
                    </figcaption>
                    <meta itemprop="duration" content="PT2M29S">
                    <div id="fader">
                    </div>
                    <div id="playback">
                    </div>
                    <audio controls id="audiotrack" preload="auto" itemprop="audio">
                        <source src="audio/10.mp3"/>
                    </audio>
                </figure>
            </li>

            <li id="audio">
                <figure id="audioplayer" itemprop="track" itemscope itemtype="http://schema.org/MusicRecording" >
                    <figcaption>
                        <div id="track">Track
                            <span itemprop="name">MIAOU (REMIX)
                            </span>
                        </div>
                        <br>
                        <div id="artist">Artist
                            <span itemprop="byArtist">YOUTUNE
                            </span>
                        </div>
                        <br>
                        <div id="time">Time
                            <span id="playbacktime">00:00
                            </span>
                        </div>
                    </figcaption>
                    <meta itemprop="duration" content="PT2M29S">
                    <div id="fader">
                    </div>
                    <div id="playback">
                    </div>
                    <audio controls id="audiotrack" preload="auto" itemprop="audio">
                        <source src="audio/02.mp3"/>
                    </audio>
                </figure>
            </li>

            <li id="audio">
                <figure id="audioplayer" itemprop="track" itemscope itemtype="http://schema.org/MusicRecording" >
                    <figcaption>
                        <div id="track">Track
                            <span itemprop="name">FAROD - LE JEU A PLANTÉ ! (REMIX)
                            </span>
                        </div>
                        <br>
                        <div id="artist">Artist
                            <span itemprop="byArtist">YOUTUNE
                            </span>
                        </div>
                        <br>
                        <div id="time">Time
                            <span id="playbacktime">00:00
                            </span>
                        </div>
                    </figcaption>
                    <meta itemprop="duration" content="PT2M29S">
                    <div id="fader">
                    </div>
                    <div id="playback">
                    </div>
                    <audio controls id="audiotrack" preload="auto" itemprop="audio">
                        <source src="audio/03.mp3"/>
                    </audio>
                </figure>
            </li>

            <li id="audio">
                <figure id="audioplayer" itemprop="track" itemscope itemtype="http://schema.org/MusicRecording" >
                    <figcaption>
                        <div id="track">Track
                            <span itemprop="name">PANORMAL - HEWEW (REMIX)
                            </span>
                        </div>
                        <br>
                        <div id="artist">Artist
                            <span itemprop="byArtist">YOUTUNE
                            </span>
                        </div>
                        <br>
                        <div id="time">Time
                            <span id="playbacktime">00:00
                            </span>
                        </div>
                    </figcaption>
                    <meta itemprop="duration" content="PT2M29S">
                    <div id="fader">
                    </div>
                    <div id="playback">
                    </div>
                    <audio controls id="audiotrack" preload="auto" itemprop="audio">
                        <source src="audio/04.mp3"/>
                    </audio>
                </figure>
            </li>

            <li id="audio">
                <figure id="audioplayer" itemprop="track" itemscope itemtype="http://schema.org/MusicRecording" >
                    <figcaption>
                        <div id="track">Track
                            <span itemprop="name">SQUEEZIE IBRA TV SUPERKONAR - POCE BLEU (REMIX)
                            </span>
                        </div>
                        <br>
                        <div id="artist">Artist
                            <span itemprop="byArtist">YOUTUNE
                            </span>
                        </div>
                        <br>
                        <div id="time">Time
                            <span id="playbacktime">00:00
                            </span>
                        </div>
                    </figcaption>
                    <meta itemprop="duration" content="PT2M29S">
                    <div id="fader">
                    </div>
                    <div id="playback">
                    </div>
                    <audio controls id="audiotrack" preload="auto" itemprop="audio">
                        <source src="audio/05.mp3"/>
                    </audio>
                </figure>
            </li>

            <li id="audio">
                <figure id="audioplayer" itemprop="track" itemscope itemtype="http://schema.org/MusicRecording" >
                    <figcaption>
                        <div id="track">Track
                            <span itemprop="name">TCHOIN TCHOIN
                            </span>
                        </div>
                        <br>
                        <div id="artist">Artist
                            <span itemprop="byArtist">KAARIS
                            </span>
                        </div>
                        <br>
                        <div id="time">Time
                            <span id="playbacktime">00:00
                            </span>
                        </div>
                    </figcaption>
                    <meta itemprop="duration" content="PT2M29S">
                    <div id="fader">
                    </div>
                    <div id="playback">
                    </div>
                    <audio controls id="audiotrack" preload="auto" itemprop="audio">
                        <source src="audio/07.mp3"/>
                    </audio>
                </figure>
            </li>

            <li id="audio">
                <figure id="audioplayer" itemprop="track" itemscope itemtype="http://schema.org/MusicRecording" >
                    <figcaption>
                        <div id="track">Track
                            <span itemprop="name">DESSINER DE LA MUSIQUE
                            </span>
                        </div>
                        <br>
                        <div id="artist">Artist
                            <span itemprop="byArtist">YOUTUNE
                            </span>
                        </div>
                        <br>
                        <div id="time">Time
                            <span id="playbacktime">00:00
                            </span>
                        </div>
                    </figcaption>
                    <meta itemprop="duration" content="PT2M29S">
                    <div id="fader">
                    </div>
                    <div id="playback">
                    </div>
                    <audio controls id="audiotrack" preload="auto" itemprop="audio">
                        <source src="audio/08.mp3"/>
                    </audio>
                </figure>
            </li>

            <li id="audio">
                <figure id="audioplayer" itemprop="track" itemscope itemtype="http://schema.org/MusicRecording" >
                    <figcaption>
                        <div id="track">Track
                            <span itemprop="name">MATHIEU SOMMET - ILS SONT COOLS (REMIX)
                            </span>
                        </div>
                        <br>
                        <div id="artist">Artist
                            <span itemprop="byArtist">YOUTUNE
                            </span>
                        </div>
                        <br>
                        <div id="time">Time
                            <span id="playbacktime">00:00
                            </span>
                        </div>
                    </figcaption>
                    <meta itemprop="duration" content="PT2M29S">
                    <div id="fader">
                    </div>
                    <div id="playback">
                    </div>
                    <audio controls id="audiotrack" preload="auto" itemprop="audio">
                        <source src="audio/09.mp3"/>
                    </audio>
                </figure>
            </li>

        </ul>

        <ul id="list">
            <li id="list">ANUBIS</li id="list"><br>
            <li id="list">CHEB PRINCE 2  LÉ LÉ LA!!!</li id="list"><br>
            <li id="list">MIAOU (REMIX)</li id="list"><br>
            <li id="list">FAROD - LE JEU A PLANTÉ ! (REMIX)</li id="list"><br>
            <li id="list">PANORMAL - HEWEW (REMIX)</li id="list"><br>
            <li id="list">SQUEEZIE IBRA TV SUPERKONAR - POCE BLEU (REMIX)</li id="list"><br>
            <li id="list">TCHOIN TCHOIN</li id="list"><br>
            <li id="list">DESSINER DE LA MUSIQUE</li id="list"><br>
            <li id="list">MATHIEU SOMMET - ILS SONT COOLS (REMIX)</li id="list"><br>
        </ul>

        <script src="lecteur_test.js" ></script>
    </body>

</HTML>

JAVASCRIPT

/*-------------------------------------------------------------------------------------------------
 PLAYLIST
-------------------------------------------------------------------------------------------------*/

function playNext()
{
    this.parentNode.style.color="white";
    this.nextInTheList.parentNode.style.color="red";
    this.parentNode.style.display="none";
    this.nextInTheList.parentNode.style.display="block";
    this.nextInTheList.play();
}

function playList()
{
    var audioList,k,km,nextInTheList;
    audioList=document.getElementById("playlist").getElementsByTagName("audio");
    km=audioList.length;
    for (k=0;k<km;k++)
    {
        if (k<(km-1)) nextInTheList=k+1; else nextInTheList=0;
        audioList[k].nextInTheList=audioList[nextInTheList]
        audioList[k].addEventListener("ended",playNext,false);
    }

}
window.addEventListener("load",playList,false);

function player() {
  if (audioTrack.paused) {
    setText(this, "Pause");
    audioTrack.play();
    } else {
    setText(this,"Play");
    audioTrack.pause(); 
    }
}

function setText(el,text) {
    el.innerHTML = text;
}

function finish() {
        audioTrack.currentTime = 0;
        setText(playButton,"Play");
}

function updatePlayhead() { 
    playhead.value = audioTrack.currentTime;
    var s = parseInt(audioTrack.currentTime % 60);
    var m = parseInt((audioTrack.currentTime / 60) % 60);
    s = (s >= 10) ? s : "0" + s;
    m = (m >= 10) ? m : "0" + m;
    playbacktime.innerHTML = m + ':' + s ;

}

function volumizer() {
    if (audioTrack.volume == 0) { setText(muteButton,"Unmute"); }
    else { setText(muteButton,"Mute"); }
}

function muter() {
    if (audioTrack.volume == 0) {
        audioTrack.volume = restoreValue;
        volumeSlider.value = restoreValue;
    } else {
        audioTrack.volume = 0;
        restoreValue = volumeSlider.value;
        volumeSlider.value = 0;
    }
}

function setAttributes(el, attrs) {
    for(var key in attrs){
        el.setAttribute(key, attrs[key]);
    }
}

var audioPlayer = document.getElementById("audioplayer"),
fader = document.getElementById("fader"),
playback = document.getElementById("playback"),
audioTrack = document.getElementById("audiotrack"),
playbackTime = document.getElementById("playbacktime"),
playButton = document.createElement("button"),
muteButton = document.createElement("button"),
playhead = document.createElement("progress")
volumeSlider = document.createElement("input");
setText(playButton, "Play");
setText(muteButton, "Mute");
setAttributes(playButton, { "type": "button", "class": "ss-icon" });
setAttributes(muteButton, { "type": "button", "class": "ss-icon" });
muteButton.style.display = "block";
muteButton.style.margin = "0 auto";
setAttributes(volumeSlider, { "type": "range", "min": "0", "max": "1", "step": "any", "value": "1", "orient": "vertical", "id": "volumeSlider" });
var duration = audioTrack.duration;
setAttributes(playhead, { "min": "0", "max": "100", "value": "0", "id": "playhead" });
fader.appendChild(volumeSlider);
fader.appendChild(muteButton);
playback.appendChild(playButton);
playback.appendChild(playhead);
audioTrack.removeAttribute("controls");
playButton.addEventListener("click", player, false);
muteButton.addEventListener("click", muter, false);
volumeSlider.addEventListener("input", function(){ audioTrack.volume = volumeSlider.value; }, false);
audioTrack.addEventListener('volumechange', volumizer, false);
audioTrack.addEventListener('playing', function(){ playhead.max = audioTrack.duration; }, false);
audioTrack.addEventListener('timeupdate', updatePlayhead, false);
audioTrack.addEventListener('ended', finish, false);

CSS


body {
  background-image: url("background/background.jpg");
}

@font-face {
    font-family: SSStandard;
  src:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/ss-standard.woff') format('woff');
  font-weight:normal;
  font-style:normal;
}

.ss-icon,.ss-icon.ss-standard {
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    white-space: nowrap;
    font-feature-settings: "liga","dlig";
}

.ss-icon,.ss-icon.ss-standard {
    font-family: SSStandard;
}

* { 
  box-sizing: border-box; 
}

figure#audioplayer { 
  border: 1px solid #000;
  background: #333;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/dark_wall.png);
  overflow: hidden;
  width: 32rem;
  padding: .4rem;
  margin: 0 auto;
}

figure#audioplayer audio { 
  width: 0; height: 0; 
}

figure#audioplayer figcaption { 
  width: 21.5rem; font-size: 0;
  margin: .45rem; background: #000;
  float: left; 
  border: 1px solid #555;
}

figure#audioplayer figcaption div { 
  background: #000;
  color: #fff;
  padding: .8rem;
  font-family: Avenir, Helvetica, sans-serif;
  text-transform: uppercase; font-size: .8rem;
  display: inline-block;
}

figure#audioplayer figcaption div span { 
  display: block;
  font-size: 1.3rem;
  text-indent: 1rem; 
}

div#track {
  border-bottom: 1px solid #555;
  width: 100%;
}

div#artist {
  border-bottom: 1px solid #555;
  width: 100%;
}

div#time { 
  width: 7.55rem;
  border-left: 1px solid #555; 
}

input#volumeSlider { 
  -webkit-appearance: slider-vertical;  
}

figure#audioplayer button { 
  width: 3rem; height: 3rem; 
  background: #000; color: #fff; 
  border: none; 
}

#playback { 
  clear: both; 
}

div#fader { 
  display: inline-block; 
}

#playback progress { 
  margin-left: 1rem; 
  width: 20rem; height: 12px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #888;
  border: none;
  color: hsl(44,100%,44%);
}

progress::-webkit-progress-bar, progress::-moz-progress-bar, progress::progress-bar {
  background: hsl(44,100%,44%);
}

progress::-webkit-progress-value { 
  background: hsl(44,100%,44%); 
}

progress::-moz-progress-bar {
background-color: hsl(44,100%,44%);
}

@media screen and (max-width: 500px) {
  div#time {
  display: block !important; border-top: 1px solid #555; width: 100%; 
}
  figure#audioplayer { 
    width: 100%; padding: .2rem; 
  }
  figure#audioplayer figcaption div { 
    padding: .4rem; 
  }
}

@media screen and (max-width: 450px) {
figure#audioplayer figcaption { 
  width: 16rem; 
}
#playback progress { 
  width: 220px; 
  } 
}

@media screen and (max-width: 400px) {
figure#audioplayer figcaption { 
  width: 14rem; 
  }
}

Ce que je veux

je veux avoir une playlist avec une lecture en boucle de toutes les musiques avec seulement la piste audio de la musique en cour de lecture de visible, une liste en dessous de toutes les musiques d'écrit en blanc sauf la musique en cour de lecture qui elle est en rouge. et récuperer le volume d'une piste audio pour la mettre dans la prochaine.

Ce que j'obtiens

pour la piste audio de la première musique y'a aucun problème, les autres musiques en revenche on entend bien la musique mais la piste audio est invisible je ne les voit pas ni d'où vient le problème d'ailleurs, pour la list ya le titre de la première musique qui est en rouge mais quand je passe aux autres musiques elle reste rouges et les autres titres restent blanchent. pour ce qui est de recuperer le volume étant débutant je ne sais pas comment faire. et le tem
p ne défile pus aussi et sa me le fait depuis que j'ai modifier mes scripts mais je ne sais pusa
quel moment le temp dans l'onglet "time" vous pouvez voir sa ici pour que ce sois plus clair

18 réponses

Lartak

Bonsoir.
Pour rappel, les valeurs de l'attribut id, doivent être unique dans le DOM.
Tu ne peux donc pas par exemple avoir deux éléments HTML qui ont l'ID playback sur la même page.

zougui
Auteur

Ah... OK bah merci je verrais sa tout à l'heure la je peux pas mais du coup si je dois changer toutes les ID je doit copier coller le JS et le CSS plusieurs fois pour chaque ID différente n'y a t-il pas une manière plus rapide à faire ? C'est pareil pour l'ID des li ou sa c'est différent et l'erreur vient d'ailleurs ?

zougui
Auteur

n'aurais tu pas un moyen rapide et efficace de faire la playlist parce que si je doit copier coller 15 fois tout le code JS et CSS en changeant juste l'ID audio à audio1, audio2 etc. sa va être très long et pas terrible

betaWeb

Salut,

Avec une simple boucle ? ;)

zougui
Auteur

j'ai fait ce que tu ma dit et c'est encore pire alors ou c'est moi qui a mal compris ou j'ai rater un truc, maintenant la piste audio c'est un petit carré qui est survoler par la list des titres de musiques.

HTML

<!DOCTYPE html>
<HTML>

    <head>
        <link rel="stylesheet" href="lecteur_test.css">
        <meta charset="utf-8" />
        <title>
        lecteur
        </title>
        <style>

        li#audio {display:none;}
        li#audio:first-of-type {display:block;}
        li#audio2 {display:none;}
        li#audio2:first-of-type {display:block;}
        li#audio3 {display:none;}
        li#audio3:first-of-type {display:block;}
        li#audio4 {display:none;}
        li#audio4:first-of-type {display:block;}
        li#audio5 {display:none;}
        li#audio5:first-of-type {display:block;}
        li#audio6 {display:none;}
        li#audio6:first-of-type {display:block;}
        li#audio7 {display:none;}
        li#audio7:first-of-type {display:block;}
        li#audio8 {display:none;}
        li#audio8:first-of-type {display:block;}
        li#audio9 {display:none;}
        li#audio9:first-of-type {display:block;}

        li#list {color:white;}
        li#list:first-of-type {color:red;}
        li#list2 {color:white;}
        li#list2:first-of-type {color:red;}
        li#list3 {color:white;}
        li#list3:first-of-type {color:red;}
        li#list4 {color:white;}
        li#list4:first-of-type {color:red;}
        li#list5 {color:white;}
        li#list5:first-of-type {color:red;}
        li#list6 {color:white;}
        li#list6:first-of-type {color:red;}
        li#list7 {color:white;}
        li#list7:first-of-type {color:red;}
        li#list8 {color:white;}
        li#list8:first-of-type {color:red;}
        li#list9 {color:white;}
        li#list9:first-of-type {color:red;}

        </style>
    </head>

    <body>

        <ul id="playlist">
            <li id="audio">
                <figure id="audioplayer" itemprop="track" itemscope itemtype="http://schema.org/MusicRecording" >
                    <figcaption>
                        <div id="track">Track
                            <span itemprop="name">ANUBIS
                            </span>
                        </div>
                        <br>
                        <div id="artist">Artist
                            <span itemprop="byArtist">YOUTUNE
                            </span>
                        </div>
                        <br>
                        <div id="time">Time
                            <span id="playbacktime">00:00
                            </span>
                        </div>
                    </figcaption>
                    <meta itemprop="duration" content="PT2M29S">
                    <div id="fader">
                    </div>
                    <div id="playback">
                    </div>
                    <audio controls id="audiotrack" preload="auto" itemprop="audio">
                        <source src="audio/06.mp3"/>
                    </audio>
                </figure>
            </li>

            <li id="audio2">
                <figure id="audioplayer2" itemprop="track" itemscope itemtype="http://schema.org/MusicRecording" >
                    <figcaption>
                        <div id="track2">Track
                            <span itemprop="name">CHEB PRINCE 2  LÉ LÉ LA!!!
                            </span>
                        </div>
                        <br>
                        <div id="artist2">Artist
                            <span itemprop="byArtist">SOFIANE SMILE
                            </span>
                        </div>
                        <br>
                        <div id="time2">Time
                            <span id="playbacktime2">00:00
                            </span>
                            </div>
                    </figcaption>
                    <meta itemprop="duration" content="PT2M29S">
                    <div id="fader2">
                    </div>
                    <div id="playback2">
                    </div>
                    <audio controls id="audiotrack2" preload="auto" itemprop="audio">
                        <source src="audio/10.mp3"/>
                    </audio>
                </figure>
            </li>

            <li id="audio3">
                <figure id="audioplayer3" itemprop="track" itemscope itemtype="http://schema.org/MusicRecording" >
                    <figcaption>
                        <div id="track3">Track
                            <span itemprop="name">MIAOU (REMIX)
                            </span>
                        </div>
                        <br>
                        <div id="artist3">Artist
                            <span itemprop="byArtist">YOUTUNE
                            </span>
                        </div>
                        <br>
                        <div id="time3">Time
                            <span id="playbacktime">00:00
                            </span>
                        </div>
                    </figcaption>
                    <meta itemprop="duration" content="PT2M29S">
                    <div id="fader3">
                    </div>
                    <div id="playback3">
                    </div>
                    <audio controls id="audiotrack3" preload="auto" itemprop="audio">
                        <source src="audio/02.mp3"/>
                    </audio>
                </figure>
            </li>

            <li id="audio4">
                <figure id="audioplayer4" itemprop="track" itemscope itemtype="http://schema.org/MusicRecording" >
                    <figcaption>
                        <div id="track4">Track
                            <span itemprop="name">FAROD - LE JEU A PLANTÉ ! (REMIX)
                            </span>
                        </div>
                        <br>
                        <div id="artist4">Artist
                            <span itemprop="byArtist">YOUTUNE
                            </span>
                        </div>
                        <br>
                        <div id="time4">Time
                            <span id="playbacktime4">00:00
                            </span>
                        </div>
                    </figcaption>
                    <meta itemprop="duration" content="PT2M29S">
                    <div id="fader4">
                    </div>
                    <div id="playback4">
                    </div>
                    <audio controls id="audiotrack4" preload="auto" itemprop="audio">
                        <source src="audio/03.mp3"/>
                    </audio>
                </figure>
            </li>

            <li id="audio5">
                <figure id="audioplayer5" itemprop="track" itemscope itemtype="http://schema.org/MusicRecording" >
                    <figcaption>
                        <div id="track5">Track
                            <span itemprop="name">PANORMAL - HEWEW (REMIX)
                            </span>
                        </div>
                        <br>
                        <div id="artist5">Artist
                            <span itemprop="byArtist">YOUTUNE
                            </span>
                        </div>
                        <br>
                        <div id="time5">Time
                            <span id="playbacktime">00:00
                            </span>
                        </div>
                    </figcaption>
                    <meta itemprop="duration" content="PT2M29S">
                    <div id="fader5">
                    </div>
                    <div id="playback5">
                    </div>
                    <audio controls id="audiotrack5" preload="auto" itemprop="audio">
                        <source src="audio/04.mp3"/>
                    </audio>
                </figure>
            </li>

            <li id="audio6">
                <figure id="audioplayer6" itemprop="track" itemscope itemtype="http://schema.org/MusicRecording" >
                    <figcaption>
                        <div id="track6">Track
                            <span itemprop="name">SQUEEZIE IBRA TV SUPERKONAR - POCE BLEU (REMIX)
                            </span>
                        </div>
                        <br>
                        <div id="artist6">Artist
                            <span itemprop="byArtist">YOUTUNE
                            </span>
                        </div>
                        <br>
                        <div id="time6">Time
                            <span id="playbacktime6">00:00
                            </span>
                        </div>
                    </figcaption>
                    <meta itemprop="duration" content="PT2M29S">
                    <div id="fader6">
                    </div>
                    <div id="playback6">
                    </div>
                    <audio controls id="audiotrack6" preload="auto" itemprop="audio">
                        <source src="audio/05.mp3"/>
                    </audio>
                </figure>
            </li>

            <li id="audio7">
                <figure id="audioplayer7" itemprop="track" itemscope itemtype="http://schema.org/MusicRecording" >
                    <figcaption>
                        <div id="track7">Track
                            <span itemprop="name">TCHOIN TCHOIN
                            </span>
                        </div>
                        <br>
                        <div id="artist7">Artist
                            <span itemprop="byArtist">KAARIS
                            </span>
                        </div>
                        <br>
                        <div id="time7">Time
                            <span id="playbacktime7">00:00
                            </span>
                        </div>
                    </figcaption>
                    <meta itemprop="duration" content="PT2M29S">
                    <div id="fader7">
                    </div>
                    <div id="playback7">
                    </div>
                    <audio controls id="audiotrack7" preload="auto" itemprop="audio">
                        <source src="audio/07.mp3"/>
                    </audio>
                </figure>
            </li>

            <li id="audio8">
                <figure id="audioplayer8" itemprop="track" itemscope itemtype="http://schema.org/MusicRecording" >
                    <figcaption>
                        <div id="track8">Track
                            <span itemprop="name">DESSINER DE LA MUSIQUE
                            </span>
                        </div>
                        <br>
                        <div id="artist8">Artist
                            <span itemprop="byArtist">YOUTUNE
                            </span>
                        </div>
                        <br>
                        <div id="time8">Time
                            <span id="playbacktime8">00:00
                            </span>
                        </div>
                    </figcaption>
                    <meta itemprop="duration" content="PT2M29S">
                    <div id="fade8r">
                    </div>
                    <div id="playback8">
                    </div>
                    <audio controls id="audiotrack8" preload="auto" itemprop="audio">
                        <source src="audio/08.mp3"/>
                    </audio>
                </figure>
            </li>

            <li id="audio9">
                <figure id="audioplayer9" itemprop="track" itemscope itemtype="http://schema.org/MusicRecording" >
                    <figcaption>
                        <div id="track9">Track
                            <span itemprop="name">MATHIEU SOMMET - ILS SONT COOLS (REMIX)
                            </span>
                        </div>
                        <br>
                        <div id="artist9">Artist
                            <span itemprop="byArtist">YOUTUNE
                            </span>
                        </div>
                        <br>
                        <div id="time9">Time
                            <span id="playbacktime9">00:00
                            </span>
                        </div>
                    </figcaption>
                    <meta itemprop="duration" content="PT2M29S">
                    <div id="fader9">
                    </div>
                    <div id="playback9">
                    </div>
                    <audio controls id="audiotrack9" preload="auto" itemprop="audio">
                        <source src="audio/09.mp3"/>
                    </audio>
                </figure>
            </li>

        </ul>

        <ul id="list">
            <li id="list">ANUBIS</li><br>
            <li id="list2">CHEB PRINCE 2  LÉ LÉ LA!!!</li><br>
            <li id="list3">MIAOU (REMIX)</li><br>
            <li id="list4">FAROD - LE JEU A PLANTÉ ! (REMIX)</li><br>
            <li id="list5">PANORMAL - HEWEW (REMIX)</li><br>
            <li id="list6">SQUEEZIE IBRA TV SUPERKONAR - POCE BLEU (REMIX)</li><br>
            <li id="list7">TCHOIN TCHOIN</li><br>
            <li id="list8">DESSINER DE LA MUSIQUE</li><br>
            <li id="list9">MATHIEU SOMMET - ILS SONT COOLS (REMIX)</li><br>
        </ul>

        <script src="lecteur_test.js" ></script>
    </body>

</HTML>

JS

/*-------------------------------------------------------------------------------------------------
 PLAYLIST
-------------------------------------------------------------------------------------------------*/

function playNext()
{
    this.parentNode.style.color="white";
    this.nextInTheList.parentNode.style.color="red";
    this.parentNode.style.display="none";
    this.nextInTheList.parentNode.style.display="block";
    this.nextInTheList.play();
}

function playList()
{
    var audioList,k,km,nextInTheList;
    audioList=document.getElementById("playlist").getElementsByTagName("audio");
    km=audioList.length;
    for (k=0;k<km;k++)
    {
        if (k<(km-1)) nextInTheList=k+1; else nextInTheList=0;
        audioList[k].nextInTheList=audioList[nextInTheList]
        audioList[k].addEventListener("ended",playNext,false);
    }

}
window.addEventListener("load",playList,false);

function player() {
  if (audioTrack.paused) {
    setText(this, "Pause");
    audioTrack.play();
    } else {
    setText(this,"Play");
    audioTrack.pause(); 
    }
}

function setText(el,text) {
    el.innerHTML = text;
}

function finish() {
        audioTrack.currentTime = 0;
        setText(playButton,"Play");
}

function updatePlayhead() { 
    playhead.value = audioTrack.currentTime;
    var s = parseInt(audioTrack.currentTime % 60);
    var m = parseInt((audioTrack.currentTime / 60) % 60);
    s = (s >= 10) ? s : "0" + s;
    m = (m >= 10) ? m : "0" + m;
    playbacktime.innerHTML = m + ':' + s ;

}

function volumizer() {
    if (audioTrack.volume == 0) { setText(muteButton,"Unmute"); }
    else { setText(muteButton,"Mute"); }
}

function muter() {
    if (audioTrack.volume == 0) {
        audioTrack.volume = restoreValue;
        volumeSlider.value = restoreValue;
    } else {
        audioTrack.volume = 0;
        restoreValue = volumeSlider.value;
        volumeSlider.value = 0;
    }
}

function setAttributes(el, attrs) {
    for(var key in attrs){
        el.setAttribute(key, attrs[key]);
    }
}

var audioPlayer = document.getElementById("audioplayer", "audioplayer2", "audioplayer3", "audioplayer4", "audioplayer5", "audioplayer6", "audioplayer7", "audioplayer8", "audioplayer9")
fader = document.getElementById("fader", "fader2", "fader3", "fader4", "fader5", "fader6", "fader7", "fader8", "fader9")
playback = document.getElementById("playback", "playback2", "playback3", "playback4","playback5", "playback6", "playback7", "playback8", "playback9")
audioTrack = document.getElementById("audiotrack", "audiotrack2", "audiotrack3", "audiotrack4", "audiotrack5", "audiotrack6", "audiotrack7", "audiotrack8", "audiotrack9")
playbackTime = document.getElementById("playbacktime", "playbacktime2", "playbacktime3", "playbacktime4", "playbacktime5", "playbacktime6", "playbacktime7", "playbacktime8", "playbacktime9")
playButton = document.createElement("button"),
muteButton = document.createElement("button"),
playhead = document.createElement("progress")
volumeSlider = document.createElement("input");
setText(playButton, "Play");
setText(muteButton, "Mute");
setAttributes(playButton, { "type": "button", "class": "ss-icon" });
setAttributes(muteButton, { "type": "button", "class": "ss-icon" });
muteButton.style.display = "block";
muteButton.style.margin = "0 auto";
setAttributes(volumeSlider, { "type": "range", "min": "0", "max": "1", "step": "any", "value": "1", "orient": "vertical", "id": "volumeSlider" });
var duration = audioTrack.duration;
setAttributes(playhead, { "min": "0", "max": "100", "value": "0", "id": "playhead" });
fader.appendChild(volumeSlider);
fader.appendChild(muteButton);
playback.appendChild(playButton);
playback.appendChild(playhead);
audioTrack.removeAttribute("controls");
playButton.addEventListener("click", player, false);
muteButton.addEventListener("click", muter, false);
volumeSlider.addEventListener("input", function(){ audioTrack.volume = volumeSlider.value; }, false);
audioTrack.addEventListener('volumechange', volumizer, false);
audioTrack.addEventListener('playing', function(){ playhead.max = audioTrack.duration; }, false);
audioTrack.addEventListener('timeupdate', updatePlayhead, false);
audioTrack.addEventListener('ended', finish, false);

CSS


body {
  background-image: url("background/background.jpg");
}

@font-face {
    font-family: SSStandard;
  src:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/ss-standard.woff') format('woff');
  font-weight:normal;
  font-style:normal;
}

.ss-icon,.ss-icon.ss-standard {
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    white-space: nowrap;
    font-feature-settings: "liga","dlig";
}

.ss-icon,.ss-icon.ss-standard {
    font-family: SSStandard;
}

* { 
  box-sizing: border-box; 
}

figure#audioplayer,#audioplayer2,#audioplayer3,#audioplayer4,#audioplayer5,#audioplayer6,#audioplayer7,#audioplayer8,#audioplayer9 { 
  border: 1px solid #000;
  background: #333;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/dark_wall.png);
  overflow: hidden;
  width: 32rem;
  padding: .4rem;
  margin: 0 auto;
}

figure#audioplayer,#audioplayer2,#audioplayer3,#audioplayer4,#audioplayer5,#audioplayer6,#audioplayer7,#audioplayer8,#audioplayer9 audio { 
  width: 0; height: 0; 
}

figure#audioplayer,#audioplayer2,#audioplayer3,#audioplayer4,#audioplayer5,#audioplayer6,#audioplayer7,#audioplayer8,#audioplayer9 figcaption { 
  width: 21.5rem; font-size: 0;
  margin: .45rem; background: #000;
  float: left; 
  border: 1px solid #555;
}

figure#audioplayer,#audioplayer2,#audioplayer3,#audioplayer4,#audioplayer5,#audioplayer6,#audioplayer7,#audioplayer8,#audioplayer9 figcaption div { 
  background: #000;
  color: #fff;
  padding: .8rem;
  font-family: Avenir, Helvetica, sans-serif;
  text-transform: uppercase; font-size: .8rem;
  display: inline-block;
}

figure#audioplayer,#audioplayer2,#audioplayer3,#audioplayer4,#audioplayer5,#audioplayer6,#audioplayer7,#audioplayer8,#audioplayer9 figcaption div span { 
  display: block;
  font-size: 1.3rem;
  text-indent: 1rem; 
}

div#track,#track2,#track3,#track4,#track5,#track6,#track,#track8,#track9 {
  border-bottom: 1px solid #555;
  width: 100%;
}

div#artist,#artist2,#artist3;#artist4,#artist5,#artist6,#artist7,#artist8,#artist9 {
  border-bottom: 1px solid #555;
  width: 100%;
}

div#time,#time2,#time3,#time4,#time5,#time6,#time7,#time8,#time9 { 
  width: 7.55rem;
  border-left: 1px solid #555; 
}

input#volumeSlider { 
  -webkit-appearance: slider-vertical;  
}

figure#audioplayer,#audioplayer2,#audioplayer3,#audioplayer4,#audioplayer5,#audioplayer6,#audioplayer7,#audioplayer8,#audioplayer9 button { 
  width: 3rem; height: 3rem; 
  background: #000; color: #fff; 
  border: none; 
}

#playback,#playback2,#playback3,#playback4,#playback5,#playback6,#playback7,#playback8,#playback9 { 
  clear: both; 
}

div#fader,#fader2,#fader3,#fader4,#fader5,#fader6,#fader7,#fader8,#fader9 { 
  display: inline-block; 
}

#playback,#playback2,#playback,#playback4,#playback5,#playback6,#playback7,#playback8,#playback9 progress { 
  margin-left: 1rem; 
  width: 20rem; height: 12px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #888;
  border: none;
  color: hsl(44,100%,44%);
}

progress::-webkit-progress-bar, progress::-moz-progress-bar, progress::progress-bar {
  background: hsl(44,100%,44%);
}

progress::-webkit-progress-value { 
  background: hsl(44,100%,44%); 
}

progress::-moz-progress-bar {
background-color: hsl(44,100%,44%);
}

@media screen and (max-width: 500px) {
  div#time,#time2,#time3,#time4,#time5,#time6,#time7,#time8,#time9 {
  display: block !important; border-top: 1px solid #555; width: 100%; 
}
  figure#audioplayer,#audioplayer2,#audioplayer3,#audioplayer4,#audioplayer5,#audioplayer6,#audioplayer7,#audioplayer8,#audioplayer9 { 
    width: 100%; padding: .2rem; 
  }
  figure#audioplayer,#audioplayer2,#audioplayer3,#audioplayer4,#audioplayer5,#audioplayer6,#audioplayer7,#audioplayer8,#audioplayer9 figcaption div { 
    padding: .4rem; 
  }
}

@media screen and (max-width: 450px) {
figure#audioplayer,#audioplayer2,#audioplayer3,#audioplayer4,#audioplayer5,#audioplayer6,#audioplayer7,#audioplayer8,#audioplayer9 figcaption { 
  width: 16rem; 
}
#playback,#playback2,#playback,#playback4,#playback5,#playback6,#playback7,#playback8,#playback9 progress { 
  width: 220px; 
  } 
}

@media screen and (max-width: 400px) {
figure#audioplayer,#audioplayer2,#audioplayer3,#audioplayer4,#audioplayer5,#audioplayer6,#audioplayer7,#audioplayer8,#audioplayer9 figcaption { 
  width: 14rem; 
  }
}
zougui
Auteur

BetaWeb

ouai sauf que je maîtrise mal les boucles même pas vraiment si ta un exemple a me donner pour une ID je me débrouillerais pour adapter avec le reste mais je sais pas comment faire...

betaWeb

C'est le moment de te former ;)
Tu as toutes les ressources nécessaire sur ce site :)

zougui
Auteur

ok je vais voir

zougui
Auteur

il n'y a pas moyen de faire des boucles en CSS par pur hasard ????
pour les scripts HTML et JS esque il reste des erreurs ? comme sa je me m'occuperais juste du CSS et sa me feras gagner du temp et je reviendrais vers vous une fois fini

Lartak

il n'y a pas moyen de faire des boucles en CSS par pur hasard ????

Non, il te faut utiliser le PHP pour faire les boucles et pour information, tu peux sélectionner des éléments HTML en javascript avec un autre attribut que l'id.
Tu devrais visionner la Formation Javascript » Javascript.

zougui
Auteur

ok je vais voir

zougui
Auteur

pour les boucles je sais qu'on ne peu pas le faire en HTML en CSS j'en ais jamais entendu parler mais on ne sais jamais, pour JS on peu le faire.pour ce qui est de séléctionner des éléments HTML avec un autre attribut que l'ID ouai mais je voit pas trop quel attribut, ni si le problème vient de JS ou ailleurs. esque je peu donner le même nom a plusieurs chose ?? comment on séléctionne les nom dans CSS pour les ID c'est des "#" mais les nom c'est quoi ?

zougui
Auteur

bon bah finalement j'en ai refait un autre qui n'est pas customiser ( celui par defaut du navigateur ) pck sa me soule j'arrive pas a regler mon problème. si vous avez une solution je suis preneur mais en attendant j'arrete.

Lartak

Tu peux par exemple utiliser les data-set, par exemple : data-toggle="track", au niveau du css, il te faut par exemple faire : 

[data-toggle="track"] {
    // ...
}

Puis au niveau du javascript :

var tracks = document.querySelectorAll('[data-toggle="track"]')
// ...
zougui
Auteur

OK merci je vais voir. Mais je vais devoir copier sa pour chaque ID avec chaque musiques ? Je peu le faire comment avec les boucles ?

zougui
Auteur

les data-toggle ne marchent pas sa me met la piste audio par defaut

html

<!DOCTYPE html>
<HTML>

    <head>
        <link rel="stylesheet" href="lecteur_test.css">
        <meta charset="utf-8" />
        <title>
        lecteur
        </title>
        <style>

        li#audio {display:none;}
        li#audio:first-of-type {display:block;}

        li#list {color:white;}
        li#list:first-of-type {color:red;}

        </style>
    </head>

    <body>

        <ul id="playlist">
            <li id="audio">
                <figure id="audioplayer" itemprop="track" itemscope itemtype="http://schema.org/MusicRecording" >
                    <figcaption>
                        <div id="track">Track
                            <span itemprop="name">ANUBIS
                            </span>
                        </div>
                        <br>
                        <div id="artist">Artist
                            <span itemprop="byArtist">YOUTUNE
                            </span>
                        </div>
                        <br>
                        <div id="time">Time
                            <span id="playbacktime">00:00
                            </span>
                        </div>
                    </figcaption>
                    <meta itemprop="duration" content="PT2M29S">
                    <div id="fader">
                    </div>
                    <div id="playback">
                    </div>
                    <audio controls id="audiotrack" preload="auto" itemprop="audio">
                        <source src="audio/06.mp3"/>
                    </audio>
                </figure>
            </li>

            <li id="audio">
                <figure id="audioplayer" itemprop="track" itemscope itemtype="http://schema.org/MusicRecording" >
                    <figcaption>
                        <div id="track">Track
                            <span itemprop="name">CHEB PRINCE 2  LÉ LÉ LA!!!
                            </span>
                        </div>
                        <br>
                        <div id="artist">Artist
                            <span itemprop="byArtist">SOFIANE SMILE
                            </span>
                        </div>
                        <br>
                        <div id="time">Time
                            <span id="playbacktime">00:00
                            </span>
                            </div>
                    </figcaption>
                    <meta itemprop="duration" content="PT2M29S">
                    <div id="fader">
                    </div>
                    <div id="playback">
                    </div>
                    <audio controls id="audiotrack" preload="auto" itemprop="audio">
                        <source src="audio/10.mp3"/>
                    </audio>
                </figure>
            </li>

            <li id="audio">
                <figure id="audioplayer" itemprop="track" itemscope itemtype="http://schema.org/MusicRecording" >
                    <figcaption>
                        <div id="track">Track
                            <span itemprop="name">MIAOU (REMIX)
                            </span>
                        </div>
                        <br>
                        <div id="artist">Artist
                            <span itemprop="byArtist">YOUTUNE
                            </span>
                        </div>
                        <br>
                        <div id="time">Time
                            <span id="playbacktime">00:00
                            </span>
                        </div>
                    </figcaption>
                    <meta itemprop="duration" content="PT2M29S">
                    <div id="fader">
                    </div>
                    <div id="playback">
                    </div>
                    <audio controls id="audiotrack" preload="auto" itemprop="audio">
                        <source src="audio/02.mp3"/>
                    </audio>
                </figure>
            </li>

            <li id="audio">
                <figure id="audioplayer" itemprop="track" itemscope itemtype="http://schema.org/MusicRecording" >
                    <figcaption>
                        <div id="track">Track
                            <span itemprop="name">FAROD - LE JEU A PLANTÉ ! (REMIX)
                            </span>
                        </div>
                        <br>
                        <div id="artist">Artist
                            <span itemprop="byArtist">YOUTUNE
                            </span>
                        </div>
                        <br>
                        <div id="time">Time
                            <span id="playbacktime">00:00
                            </span>
                        </div>
                    </figcaption>
                    <meta itemprop="duration" content="PT2M29S">
                    <div id="fader">
                    </div>
                    <div id="playback">
                    </div>
                    <audio controls id="audiotrack" preload="auto" itemprop="audio">
                        <source src="audio/03.mp3"/>
                    </audio>
                </figure>
            </li>

            <li id="audio">
                <figure id="audioplayer" itemprop="track" itemscope itemtype="http://schema.org/MusicRecording" >
                    <figcaption>
                        <div id="track">Track
                            <span itemprop="name">PANORMAL - HEWEW (REMIX)
                            </span>
                        </div>
                        <br>
                        <div id="artist">Artist
                            <span itemprop="byArtist">YOUTUNE
                            </span>
                        </div>
                        <br>
                        <div id="time">Time
                            <span id="playbacktime">00:00
                            </span>
                        </div>
                    </figcaption>
                    <meta itemprop="duration" content="PT2M29S">
                    <div id="fader">
                    </div>
                    <div id="playback">
                    </div>
                    <audio controls id="audiotrack" preload="auto" itemprop="audio">
                        <source src="audio/04.mp3"/>
                    </audio>
                </figure>
            </li>

            <li id="audio">
                <figure id="audioplayer" itemprop="track" itemscope itemtype="http://schema.org/MusicRecording" >
                    <figcaption>
                        <div id="track">Track
                            <span itemprop="name">SQUEEZIE IBRA TV SUPERKONAR - POCE BLEU (REMIX)
                            </span>
                        </div>
                        <br>
                        <div id="artist">Artist
                            <span itemprop="byArtist">YOUTUNE
                            </span>
                        </div>
                        <br>
                        <div id="time">Time
                            <span id="playbacktime">00:00
                            </span>
                        </div>
                    </figcaption>
                    <meta itemprop="duration" content="PT2M29S">
                    <div id="fader">
                    </div>
                    <div id="playback">
                    </div>
                    <audio controls id="audiotrack" preload="auto" itemprop="audio">
                        <source src="audio/05.mp3"/>
                    </audio>
                </figure>
            </li>

            <li id="audio">
                <figure id="audioplayer" itemprop="track" itemscope itemtype="http://schema.org/MusicRecording" >
                    <figcaption>
                        <div id="track">Track
                            <span itemprop="name">TCHOIN TCHOIN
                            </span>
                        </div>
                        <br>
                        <div id="artist">Artist
                            <span itemprop="byArtist">KAARIS
                            </span>
                        </div>
                        <br>
                        <div id="time">Time
                            <span id="playbacktime">00:00
                            </span>
                        </div>
                    </figcaption>
                    <meta itemprop="duration" content="PT2M29S">
                    <div id="fader">
                    </div>
                    <div id="playback">
                    </div>
                    <audio controls id="audiotrack" preload="auto" itemprop="audio">
                        <source src="audio/07.mp3"/>
                    </audio>
                </figure>
            </li>

            <li id="audio">
                <figure id="audioplayer" itemprop="track" itemscope itemtype="http://schema.org/MusicRecording" >
                    <figcaption>
                        <div id="track">Track
                            <span itemprop="name">DESSINER DE LA MUSIQUE
                            </span>
                        </div>
                        <br>
                        <div id="artist">Artist
                            <span itemprop="byArtist">YOUTUNE
                            </span>
                        </div>
                        <br>
                        <div id="time">Time
                            <span id="playbacktime">00:00
                            </span>
                        </div>
                    </figcaption>
                    <meta itemprop="duration" content="PT2M29S">
                    <div id="fader">
                    </div>
                    <div id="playback">
                    </div>
                    <audio controls id="audiotrack" preload="auto" itemprop="audio">
                        <source src="audio/08.mp3"/>
                    </audio>
                </figure>
            </li>

            <li id="audio">
                <figure id="audioplayer" itemprop="track" itemscope itemtype="http://schema.org/MusicRecording" >
                    <figcaption>
                        <div id="track">Track
                            <span itemprop="name">MATHIEU SOMMET - ILS SONT COOLS (REMIX)
                            </span>
                        </div>
                        <br>
                        <div id="artist">Artist
                            <span itemprop="byArtist">YOUTUNE
                            </span>
                        </div>
                        <br>
                        <div id="time">Time
                            <span id="playbacktime">00:00
                            </span>
                        </div>
                    </figcaption>
                    <meta itemprop="duration" content="PT2M29S">
                    <div id="fader">
                    </div>
                    <div id="playback">
                    </div>
                    <audio controls id="audiotrack" preload="auto" itemprop="audio">
                        <source src="audio/09.mp3"/>
                    </audio>
                </figure>
            </li>

        </ul>

        <ul id="list">
            <li id="list">ANUBIS</li id="list"><br>
            <li id="list">CHEB PRINCE 2  LÉ LÉ LA!!!</li id="list"><br>
            <li id="list">MIAOU (REMIX)</li id="list"><br>
            <li id="list">FAROD - LE JEU A PLANTÉ ! (REMIX)</li id="list"><br>
            <li id="list">PANORMAL - HEWEW (REMIX)</li id="list"><br>
            <li id="list">SQUEEZIE IBRA TV SUPERKONAR - POCE BLEU (REMIX)</li id="list"><br>
            <li id="list">TCHOIN TCHOIN</li id="list"><br>
            <li id="list">DESSINER DE LA MUSIQUE</li id="list"><br>
            <li id="list">MATHIEU SOMMET - ILS SONT COOLS (REMIX)</li id="list"><br>
        </ul>

        <script src="playtest.js" ></script>
    </body>

</HTML>

js

/*-------------------------------------------------------------------------------------------------
 PLAYLIST
-------------------------------------------------------------------------------------------------*/

function playNext()
{
    this.parentNode.style.color="white";
    this.nextInTheList.parentNode.style.color="red";
    this.parentNode.style.display="none";
    this.nextInTheList.parentNode.style.display="block";
    this.nextInTheList.play();
}

function playList()
{
    var audioList,k,km,nextInTheList;
    audioList=document.getElementById("playlist").getElementsByTagName("audio");
    km=audioList.length;
    for (k=0;k<km;k++)
    {
        if (k<(km-1)) nextInTheList=k+1; else nextInTheList=0;
        audioList[k].nextInTheList=audioList[nextInTheList]
        audioList[k].addEventListener("ended",playNext,false);
    }

}
window.addEventListener("load",playList,false);

function player() {
  if (audioTrack.paused) {
    setText(this, "Pause");
    audioTrack.play();
    } else {
    setText(this,"Play");
    audioTrack.pause(); 
    }
}

function setText(el,text) {
    el.innerHTML = text;
}

function finish() {
        audioTrack.currentTime = 0;
        setText(playButton,"Play");
}

function updatePlayhead() { 
    playhead.value = audioTrack.currentTime;
    var s = parseInt(audioTrack.currentTime % 60);
    var m = parseInt((audioTrack.currentTime / 60) % 60);
    s = (s >= 10) ? s : "0" + s;
    m = (m >= 10) ? m : "0" + m;
    playbacktime.innerHTML = m + ':' + s ;

}

function volumizer() {
    if (audioTrack.volume == 0) { setText(muteButton,"Unmute"); }
    else { setText(muteButton,"Mute"); }
}

function muter() {
    if (audioTrack.volume == 0) {
        audioTrack.volume = restoreValue;
        volumeSlider.value = restoreValue;
    } else {
        audioTrack.volume = 0;
        restoreValue = volumeSlider.value;
        volumeSlider.value = 0;
    }
}

function setAttributes(el, attrs) {
    for(var key in attrs){
        el.setAttribute(key, attrs[key]);
    }
}

var audioPlayer = document.querySelectorAll('[data-toggle="audioplayer"]'),
fader = document.querySelectorAll('[data-toggle="fader"]'),
playback = document.querySelectorAll('[data-toggle="playback"]'),
audioTrack = document.querySelectorAll('[data-toggle="audiotrack"]'),
playbackTime = document.querySelectorAll('[data-toggle="playbacktime"]'),
playButton = document.createElement("button"),
muteButton = document.createElement("button"),
playhead = document.createElement("progress")
volumeSlider = document.createElement("input");
setText(playButton, "Play");
setText(muteButton, "Mute");
setAttributes(playButton, { "type": "button", "class": "ss-icon" });
setAttributes(muteButton, { "type": "button", "class": "ss-icon" });
muteButton.style.display = "block";
muteButton.style.margin = "0 auto";
setAttributes(volumeSlider, { "type": "range", "min": "0", "max": "1", "step": "any", "value": "1", "orient": "vertical", "id": "volumeSlider" });
var duration = audioTrack.duration;
setAttributes(playhead, { "min": "0", "max": "100", "value": "0", "id": "playhead" });
fader.appendChild(volumeSlider);
fader.appendChild(muteButton);
playback.appendChild(playButton);
playback.appendChild(playhead);
audioTrack.removeAttribute("controls");
playButton.addEventListener("click", player, false);
muteButton.addEventListener("click", muter, false);
volumeSlider.addEventListener("input", function(){ audioTrack.volume = volumeSlider.value; }, false);
audioTrack.addEventListener('volumechange', volumizer, false);
audioTrack.addEventListener('playing', function(){ playhead.max = audioTrack.duration; }, false);
audioTrack.addEventListener('timeupdate', updatePlayhead, false);
audioTrack.addEventListener('ended', finish, false);

css

body {
  background-image: url("background/background.jpg");
}

@font-face {
    font-family: SSStandard;
  src:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/ss-standard.woff') format('woff');
  font-weight:normal;
  font-style:normal;
}

.ss-icon,.ss-icon.ss-standard {
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    white-space: nowrap;
    font-feature-settings: "liga","dlig";
}

.ss-icon,.ss-icon.ss-standard {
    font-family: SSStandard;
}

* { 
  box-sizing: border-box; 
}

[data-toggle="audioplayer"] { 
  border: 1px solid #000;
  background: #333;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/dark_wall.png);
  overflow: hidden;
  width: 32rem;
  padding: .4rem;
  margin: 0 auto;
}

[data-toggle="audioplayer"] { 
  width: 0; height: 0; 
}

[data-toggle="audioplayer"]  { 
  width: 21.5rem; font-size: 0;
  margin: .45rem; background: #000;
  float: left; 
  border: 1px solid #555;
}

[data-toggle="audioplayer"]   { 
  background: #000;
  color: #fff;
  padding: .8rem;
  font-family: Avenir, Helvetica, sans-serif;
  text-transform: uppercase; font-size: .8rem;
  display: inline-block;
}

[data-toggle="audioplayer"] { 
  display: block;
  font-size: 1.3rem;
  text-indent: 1rem; 
}

[data-toggle="track"] {
  border-bottom: 1px solid #555;
  width: 100%;
}

[data-toggle="artist"] {
  border-bottom: 1px solid #555;
  width: 100%;
}

[data-toggle="time"] { 
  width: 7.55rem;
  border-left: 1px solid #555; 
}

input#volumeSlider { 
  -webkit-appearance: slider-vertical;  
}

[data-toggle="audioplayer"] { 
  width: 3rem; height: 3rem; 
  background: #000; color: #fff; 
  border: none; 
}

[data-toggle="playback"] { 
  clear: both; 
}

[data-toggle="fader"] { 
  display: inline-block; 
}

[data-toggle="playback"] { 
  margin-left: 1rem; 
  width: 20rem; height: 12px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #888;
  border: none;
  color: hsl(44,100%,44%);
}

progress::-webkit-progress-bar, progress::-moz-progress-bar, progress::progress-bar {
  background: hsl(44,100%,44%);
}

progress::-webkit-progress-value { 
  background: hsl(44,100%,44%); 
}

progress::-moz-progress-bar {
background-color: hsl(44,100%,44%);
}

@media screen and (max-width: 500px) {
 [data-toggle="time"] {
  display: block !important; border-top: 1px solid #555; width: 100%; 
}
  [data-toggle="audioplayer"] { 
    width: 100%; padding: .2rem; 
  }
  [data-toggle="audioplayer"] { 
    padding: .4rem; 
  }
}

@media screen and (max-width: 450px) {
[data-toggle="audioplayer"] { 
  width: 16rem; 
}
[data-toggle="playback"] { 
  width: 220px; 
  } 
}

@media screen and (max-width: 400px) {
[data-toggle="audioplayer"] { 
  width: 14rem; 
  }
}
Lartak

Sérieusement, suis la formation dont je t'ai parlé, car là on dirait que tu le fais vraiment exprès.
Il est inutile que nous essayons de t'aider si tu ne fais pas le minimum nécessaire de ton côté pour apprendre.

zougui
Auteur

je n'ai pas le temp pour sa donc bon c'est pas grave merci quand meme d'avoir voulu m'aider