Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <br>
<audio src="https://silvercherry.fr/sources/musics/Angevin_B.mp3" preload="none" controls>
  Votre navigateur ne supporte pas la balise audio.
</audio>

<!-- For the playlist, you just need to do like this : -->
<br>
<div class="playlist">
  <audio src="https://silvercherry.fr/sources/musics/Celtic_Impulse.mp3" preload="none" controls>
    Votre navigateur ne supporte pas la balise audio.
  </audio>
  <ul>
    <li id="https://silvercherry.fr/sources/musics/Celtic_Impulse.mp3">Celtic Impulse</li>
    <li id="https://silvercherry.fr/sources/musics/Skye_Cuillin.mp3">Skye Cuillin</li>
    <li id="https://silvercherry.fr/sources/musics/Errigal.mp3">Errigal</li>
    <li id="https://silvercherry.fr/sources/musics/Fiddles_McGinty.mp3">Fiddles McGinty</li>
  </ul>
</div>

<p>All musics - Kevin MacLeod (<a href="https://incompetech.com/wordpress/">incompetech.com</a>)<br>
	Licensed under <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons: By Attribution 4.0 License</a></p>
              
            
!

CSS

              
                
              
            
!

JS

              
                "use strict";

// DragonPlay : Player Javascript
// https://web.silvercherry.fr/player.html
// Version 21.31.1 (Year, week, version) by SilverCherry (Marine Latour) - CC-BY

document.addEventListener("DOMContentLoaded", function() 
{ 

// Génération du player :
var audio = document.getElementsByTagName("audio");
var player = '<div class="player"><div class="play" title="Play" tabindex="0"><span></span></div><div class="pause" title="Pause" tabindex="0" style="display: none;"><span></span></div><div class="backward" title="Backward" tabindex="0"><span></span><span></span></div><div class="forward" title="Forward" tabindex="0"><span></span><span></span></div><div class="title"></div><div class="prog" aria-label="Progression" tabindex="0"><div class="progBarre"></div></div><div class="timer">00:00</div><div class="volumeF" title="Volume" aria-label="Volume : 1" tabindex="0"><div class="volumeBarre"></div></div></div>';
var head = document.getElementsByTagName("head")[0];
var style = document.createElement("style");
style.innerHTML = ":root{--player-col1:#FBFBFB;--player-col2:#333333;--player-odd:#CCCCCC;--player-even:#DDDDDD;--player-bar1:#333333;--player-bar2:#CCCCCC;--player-text:#333333;}.player .timer{white-space:nowrap}.player,.player *{box-sizing:border-box;margin:0;padding:0;line-height:1}audio{display:none}.player{display:flex;align-items:center;margin:20px;padding:5px;background-color:var(--player-col1);border-style:solid;border-width:2px 0;border-color:var(--player-col2);border-radius:5px;flex-wrap:wrap;justify-content:space-around;position:relative}.player::after{content:'';height:20px;width:40px;background-image:url('https://web.silvercherry.fr/img/DragonPlay.svg');background-repeat:no-repeat;background-size:contain}.player .pause span,.player .play span,.playlist .forward span,.playlist .backward span{display:inline-block;height:20px;border-style:solid;width:15px}.player .play span,.playlist .forward span:first-of-type{border-width:10px 0 10px 15px;border-color:transparent transparent transparent var(--player-col2)}.player .pause span{border-width:0 5px;border-color:transparent var(--player-col2)}.player .pause,.player .play,.playlist .forward,.playlist .backward{display:flex;align-items:center;width:15px;height:30px;margin:0 10px;cursor:pointer}.playlist .forward,.playlist .backward{width:20px}.player .play:hover span,.playlist .forward:hover span:first-of-type{opacity:.75}.player .pause:hover span{opacity:.75}.player .prog{overflow:hidden;cursor:pointer;max-width:100%;min-width:100px;height:20px;margin:0 10px;background-color:var(--player-bar2);flex-grow:1;border-radius:1px}.player .prog:hover .progBarre{opacity:.75}.player .progBarre{width:0;background-color:var(--player-bar1);height:20px;overflow:visible;text-indent:5px}.player .timer,.playlist{color:var(--player-text)}.player .volumeF{cursor:pointer;width:75px;height:10px;margin:5px 10px;background-color:var(--player-bar2);border-radius:1px;overflow:hidden}.player .volumeF:hover .volumeBarre{opacity:.75}.player .volumeBarre{width:100%;background-color:var(--player-bar1);height:10px}.playlist{margin:15px}.playlist .player{border-bottom:0;border-radius:5px 5px 0 0;margin:0}.playlist ul{background-color:var(--player-col1);margin:0;padding:0 5px 5px;list-style-type:none;border-style:solid;border-width:0 0 2px;border-color:var(--player-col2);border-radius:0 0 5px 5px}.playlist ul li{padding:5px;cursor:pointer}.playlist ul li:nth-of-type(odd){background-color:var(--player-odd)}.playlist ul li:nth-of-type(even){background-color:var(--player-even)}.playlist ul li:hover{opacity:.75}.playlist .backward span:first-of-type{border:0;border-right:5px solid var(--player-col2)}.playlist .forward span:last-of-type{border:0;border-left:5px solid var(--player-col2)}.playlist .backward span:last-of-type{border-width:10px 15px 10px 0;border-color:transparent var(--player-col2) transparent transparent}.playlist .backward:hover span:first-of-type,.playlist .forward:hover span:last-of-type{opacity:.75}.playlist .backward:hover span:last-of-type{opacity:.75}.player .title{margin:5px}.playlist ul li.active{text-decoration:underline;font-style:italic}";
head.appendChild(style);
var play = document.getElementsByClassName("play");
var pause = document.getElementsByClassName("pause");
var backward = document.getElementsByClassName("backward");
var forward = document.getElementsByClassName("forward");
// Mise en place du player 
for (var i = 0; i <= audio.length - 1; i++) {
    audio[i].insertAdjacentHTML("afterend", player);
    var dataVolume = audio[i].getAttribute("data-volume");
    // (Et on profite de cette boucle pour check les titles et data-volume)
    if (audio[i].title !== null && audio[i].parentNode.className !== "playlist") {
        audio[i].nextElementSibling.getElementsByClassName("title")[0].innerHTML = audio[i].title;
    }
    if (dataVolume && dataVolume>=0 && dataVolume<=1) {
        audio[i].volume = dataVolume;
        audio[i].nextElementSibling.getElementsByClassName("volumeF")[0].children[0].style.width = (dataVolume*100)+"%";
        audio[i].nextElementSibling.getElementsByClassName("volumeF")[0].setAttribute("aria-label", "Volume : "+dataVolume);
    }
    // Les boutons forward et backward sont réservés aux playlists, on les supprime des players solo
    if (audio[i].parentNode.className !== "playlist") {
        var deleteForward = audio[i].nextElementSibling.getElementsByClassName("forward")[0];
        audio[i].nextElementSibling.removeChild(deleteForward);
        var deleteBackward = audio[i].nextElementSibling.getElementsByClassName("backward")[0];
        audio[i].nextElementSibling.removeChild(deleteBackward);
    } else {
        var li = audio[i].nextElementSibling.nextElementSibling.children;
        for (var a = 0; a < li.length; a++) {
            li[a].setAttribute("tabindex", "0");
        }
    }
    // L'autoplay est un cancer pour les utilisateurs. Si vous souhaitez booster vos écoutes, falsifiez vos chiffres et épargnez vos utilisateurs.
    audio[i].removeAttribute("autoplay");
}

function playFunction(thisElement)
{
    clearInterval(interval);
    for (var j = 0; j <= audio.length - 1; j++) {
        audio[j].pause();
        audio[j].nextElementSibling.getElementsByClassName("play")[0].style.display = null;
        audio[j].nextElementSibling.getElementsByClassName("pause")[0].style.display = "none";
    }
    thisElement.style.display = "none";
    thisElement.nextElementSibling.style.display = null;
    // Automatiquement renvoyé sur le bouton play
    thisElement.nextElementSibling.focus();
    clearInterval(time);
    if (thisElement.parentNode.parentNode.className === "playlist") Timer(false, true);
    else Timer();
    thisElement.parentNode.previousElementSibling.play();
}
// Event play
for (var i = 0; i <= audio.length - 1; i++) {
    play[i].addEventListener("click", function(){playFunction(this), false});
    play[i].addEventListener("keypress", function(e)
    {
        var key = e.which || e.keyCode;
        if (key === 13) playFunction(this);
    });
}

function pauseFunction(thisElement)
{
    thisElement.parentNode.previousElementSibling.pause();
    clearInterval(time);
    thisElement.style.display = "none";
    thisElement.previousElementSibling.style.display = null;
    // Automatiquement renvoyé sur le bouton pause
    thisElement.previousElementSibling.focus();
}
// Event pause
for (var i = 0; i <= audio.length - 1; i++) {
    pause[i].addEventListener("click", function(){pauseFunction(this), false});
    pause[i].addEventListener("keypress", function(e)
    {
    var key = e.which || e.keyCode;
    if (key === 13) pauseFunction(this);
    });
}

function convertSeconds(time) {
	var reste = time;
	var result = "";
	var nbHours = Math.floor(reste / 3600);
	reste -= nbHours * 3600;
	var nbMinutes = Math.floor(reste / 60);
	reste -= nbMinutes * 60;
	var nbSeconds = Math.floor(reste);
	if(nbHours > 0)
		result = result + ("0" + nbHours).slice(-2) + ':';
	result = result + ("0" + nbMinutes).slice(-2) + ':';
	result = result + ("0" + nbSeconds).slice(-2);
	return result;
}

// Fonction timer, l'interval pour récupérer la durée du fichier si disponible :
var time;
var timer = document.getElementsByClassName("timer");

var interval = setInterval(function()
{
    for (var i = 0; i <= audio.length - 1; i++) {
        var duree = audio[i].duration;
        if (audio[i].error && audio[i].error.code === 4) {
            timer[i].innerHTML = "File not found";
        } else if ((!audio[i].hasAttribute("preload") || (audio[i].hasAttribute("preload") && audio[i].getAttribute("preload") !== "none")) && isNaN(duree)) {
            timer[i].innerHTML = "load";
        } else if (audio[i].hasAttribute("preload") && audio[i].getAttribute("preload") === "none") {
            timer[i].innerHTML = "--:--";
        } else {
            timer[i].innerHTML = convertSeconds(duree);
        }
    }
}, 1000);
setTimeout(function()
{
    clearInterval(interval);
    for (var i = 0; i <= audio.length - 1; i++) {
        if (timer[i].innerHTML === "load") timer[i].innerHTML = "--:--";
    }
}, 10100);


var progBarre = document.getElementsByClassName("progBarre");
var audiotime = [];
var tempAudiotime = [];

function Timer(stop = false, activatePlaylist = false)
{
    if (stop === true) {
        clearInterval(time);
    } else {
        time = setInterval(function() 
        {
            for (var i = 0; i <= audio.length - 1; i++) {
                // Mise en place de l'affichage timer / barre de progression.
                tempAudiotime[i] = audiotime[i];
                audiotime[i] = audio[i].currentTime;
                if (tempAudiotime[i] == audiotime[i] && !audio[i].paused) {
                    timer[i].innerHTML = "load";
                } else if (audiotime[i] !== 0) {
                    timer[i].innerHTML = (audio[i].duration>3600 && audiotime[i]<3600?'00:':'')+convertSeconds(audiotime[i]);
                } 
                if (isNaN(audio[i].duration)) {
                    timer[i].innerHTML = "--:--";
                }
                if (audio[i].error && audio[i].error.code === 4) {
                    reset(audio[i]);
                    timer[i].innerHTML = "File not found";
                }
                var widthProg = audio[i].currentTime / audio[i].duration * 100;
                progBarre[i].style.width = widthProg+"%";
                if (audiotime[i] === audio[i].duration && activatePlaylist === false && !audio[i].hasAttribute("loop")) {
                    // Stop le fichier audio à la fin des balises qui ne loop pas.
                    reset(audio[i]);
                    Timer(true);
                } else if (audiotime[i] === audio[i].duration && activatePlaylist === true) {
                    // Check l'épisode suivant à lire dans la playlist
                    var thisPlaylist = audio[i].parentNode;
                    for (var k = 0; k <= playlist.length - 1; k++) {
                        if (thisPlaylist === playlist[k]) {
                            var nextPlaylistNumber = k;
                            playerPlaylist[k].src = next[k];
                            for (var j = 0; j <= thisPlaylist.getElementsByTagName("ul")[0].children.length - 1; j++) {
                                // Ecriture du titre à venir (premier fichier si fin de playlist)
                                var ul = thisPlaylist.getElementsByTagName("ul")[0];
                                if (ul.children[j].nextElementSibling !== null && ul.children[j].nextElementSibling.id === next[k]) {
                                    playerPlaylist[k].nextElementSibling.getElementsByClassName("title")[0].innerHTML = ul.children[j].nextElementSibling.innerHTML;
                                    if (ul.children[j].nextElementSibling.nextElementSibling) {
                                        forward[k].id = ul.children[j].nextElementSibling.nextElementSibling.id;
                                    } else {
                                        forward[k].id = ul.children[0].id;
                                    }
                                    backward[k].id = ul.children[j].id;
                                    ul.children[j].classList.remove("active");
                                    ul.children[j].nextElementSibling.classList.add("active");
                                } else if (ul.children[j].nextElementSibling === null && ul.children[0].id === next[k]) {
                                    playerPlaylist[k].nextElementSibling.getElementsByClassName("title")[0].innerHTML = ul.children[0].innerHTML;
                                    forward[k].id = ul.children[1].id;
                                    backward[k].id = ul.lastElementChild.id;
                                    ul.children[j].classList.remove("active");
                                    ul.children[0].classList.add("active");
                                }
                            }
                        }
                    }
                    audio[i].play();
                    prepareNext(nextPlaylistNumber);
                }
            }
        }, 500);
    }
}

function reset(audioElement) {
    audioElement.currentTime = 0;
    audioElement.pause();
    audioElement.nextElementSibling.getElementsByClassName("progBarre")[0].style.width = "0%";
    audioElement.nextElementSibling.getElementsByClassName("timer")[0].innerHTML = "00:00:00";
    audioElement.nextElementSibling.getElementsByClassName("play")[0].style.display = null;
    audioElement.nextElementSibling.getElementsByClassName("pause")[0].style.display = "none";
}

function prepareNext(playlistNumber)
{
    for (var i = 0; i <= playlist.length - 1; i++) {
        var ul = playlist[i].getElementsByTagName("ul")[0];
        for (var j = 0; j <= ul.childElementCount - 1; j++) {
            if (playlistNumber === i 
                && ul.children[j].id === next[i] 
                && ul.children[j].nextElementSibling !== null) {
                next[i] = ul.children[j].nextElementSibling.id;
                return;
            } else if (playlistNumber === i 
                && ul.children[j].nextElementSibling === null) {
                next[i] = ul.children[0].id;
            }
        }
    }
}

// https://stackoverflow.com/questions/5598743/finding-elements-position-relative-to-the-document
function getCoords(elem) 
{
    var box = elem.getBoundingClientRect();
    var body = document.body;
    var docEl = document.documentElement;
    var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;
    var clientLeft = docEl.clientLeft || body.clientLeft || 0;
    var left = box.left + scrollLeft - clientLeft;
    return Math.round(left);
}

// Barre de progression
var prog = document.getElementsByClassName("prog");
for (var i = 0; i <= audio.length - 1; i++) {
    // Contrôle pointer
    prog[i].addEventListener("pointerdown", PointerDown);
    function PointerDown(e){
        position(e, this, "prog");
        this.addEventListener("pointermove", PointerMove);
        this.addEventListener("pointerup", PointerUp, {once: true});
    }
    function PointerMove(e){
        position(e, this, "prog");
    }
    function PointerUp(e){
        this.removeEventListener("pointermove", PointerMove);
    }

    // Contrôle clavier
    prog[i].addEventListener("keydown", function(e)
    {
        var key = e.which || e.keyCode;
        if (key === 38 || key === 40) e.preventDefault();
        if (key === 39 || key === 107 || key === 38) progControl(this, "up");
        if (key === 37 || key === 109 || key === 40) progControl(this, "down");
    }, false);
}

function progControl(thisElement, pass)
{
    var audioParent = thisElement.parentNode.previousElementSibling;
    if (pass === "up") {
        if (audioParent.duration > (audioParent.currentTime + 5)) audioParent.currentTime += 5;
        else audioParent.currentTime = audioParent.duration - 1;
    } else if (pass === "down") {
        if (audioParent.currentTime > 5) audioParent.currentTime -= 5;
        else audioParent.currentTime = 0;
    }
    var widthProg = audioParent.currentTime * 100 / audioParent.duration;
    thisElement.children[0].style.width = widthProg+"%";
}

// Barre de volume
var volumeF = document.getElementsByClassName("volumeF");
for (var i = 0; i <= audio.length - 1; i++) {
    // Contrôle pointeur
    volumeF[i].addEventListener("pointerdown", PointerDown);
    function PointerDown(e){
        position(e, this, "volume");
        this.addEventListener("pointermove", PointerMove);
        this.addEventListener("pointerup", PointerUp, {once: true});
    }
    function PointerMove(e){
        position(e, this, "volume");
    }
    function PointerUp(e){
        this.removeEventListener("pointermove", PointerMove);
    }

    // Contrôle clavier
    volumeF[i].addEventListener("keydown", function(e)
    {
        var key = e.which || e.keyCode;
        if (key === 38 || key === 40) e.preventDefault();
        if (key === 39 || key === 107 || key === 38) volumeControl(this, "up");
        if (key === 37 || key === 109 || key === 40) volumeControl(this, "down");
    }, false);
}

function volumeControl(thisElement, pass)
{
    var audioParent = thisElement.parentNode.previousElementSibling;
    if (pass === "up") {
        if (audioParent.volume < 0.9) audioParent.volume += 0.1;
        else audioParent.volume = 1;
    } else if (pass === "down") {
        if (audioParent.volume > 0.1) audioParent.volume -= 0.1;
        else audioParent.volume = 0;
    }
    var widthProg = audioParent.volume * 100;
    thisElement.children[0].style.width = widthProg+"%";
    thisElement.setAttribute("aria-label", "Volume : "+audioParent.volume.toFixed(2));
}

function position(e, thisElement, localisation) {
    var xClient = e.clientX; // Position du curseur sur l'axe X (référenciel : gauche de la page).
    var leftOfDiv = getCoords(thisElement); // Position du début de l'élément sur l'axe X (référenciel : gauche de la div).
    var xPositionPointer = xClient - leftOfDiv; // Calul de la position du curseur par rapport à la gauche de la div.
    var width = thisElement.clientWidth; // Récupération de la width (sans les px pour le calcul).
    var purcent = 100 * xPositionPointer / width; // Mise en pourcentage de la position demandée.
    var audioParent = thisElement.parentNode.previousElementSibling;
    if(purcent < 0)
        purcent = 0;
    if(purcent > 100)
        purcent = 100;
    if(purcent >= 0 && purcent <= 100){
        if (localisation === "volume") {
            audioParent.volume = purcent / 100;
            var widthProg = audioParent.volume * 100;
            thisElement.setAttribute("aria-label", "Volume : "+audioParent.volume.toFixed(2));
        } else if (localisation === "prog") {
            audioParent.currentTime = purcent * audioParent.duration / 100; // Met le currentTime à la position demandée.
            var widthProg = audioParent.currentTime * 100 / audioParent.duration;
        }
        thisElement.children[0].style.width = widthProg+"%";
    }
}

// Préparation de la playlist
var playlist = document.getElementsByClassName("playlist");
var playerPlaylist = Array();
var next = Array();
for (var z = 0; z <= playlist.length - 1; z++) {
    var UlPlaylist = playlist[z].getElementsByTagName("ul")[0];
    playerPlaylist[z] = playlist[z].getElementsByTagName("audio")[0];
    playerPlaylist[z].src = UlPlaylist.children[0].id;
    UlPlaylist.children[0].classList.add("active");
    playerPlaylist[z].nextElementSibling.getElementsByClassName("title")[0].innerHTML = UlPlaylist.children[0].innerHTML;
    if(UlPlaylist.children.length > 1)
        next[z] = UlPlaylist.children[1].id;
    else
        next[z] = UlPlaylist.children[0].id;
    forward[z].id = next[z];
    backward[z].id = UlPlaylist.lastElementChild.id;

    for (var j = 0; j <= UlPlaylist.childElementCount - 1; j++) {
        // Clic sur la liste
        UlPlaylist.children[j].addEventListener("click", function(){listClick(this)}, false);
        UlPlaylist.children[j].addEventListener("keypress", function(e) 
        {
            var key = e.which || e.keyCode;
            if (key === 13) listClick(this);
        });
    }

    var thisBackward = playlist[z].getElementsByClassName("backward")[0];
    thisBackward.addEventListener("click", function(){backwardFunction(this)}, false);
    thisBackward.addEventListener("keypress", function(e) 
    {
        var key = e.which || e.keyCode;
        if (key === 13) backwardFunction(this);
    });

    var thisForward = playlist[z].getElementsByClassName("forward")[0];
    thisForward.addEventListener("click", function(){forwardFunction(this), false});
    thisForward.addEventListener("keypress", function(e)
    {
        var key = e.which || e.keyCode;
        if (key === 13) forwardFunction(this);
    });
}

function listClick(thisElement)
{
    clearInterval(time);
    clearInterval(interval);
    var playlistNow = thisElement.parentNode.parentNode;
    for (var a = 0; a <= playlist.length - 1; a++) {
        if (playlistNow === playlist[a]) {
            playerPlaylist[a] = thisElement.parentNode.parentNode.getElementsByTagName("audio")[0];
            playerPlaylist[a].src = thisElement.id;
            playerPlaylist[a].nextElementSibling.getElementsByClassName("title")[0].innerHTML = thisElement.innerHTML;
            forwardAndBackward(a, thisElement);
        }
    }
}

function backwardFunction(thisElement)
{
    clearInterval(time);
    clearInterval(interval);
    // Même chose
    var playlistNow = thisElement.parentNode.parentNode;
    for (var a = 0; a <= playlist.length - 1; a++) {
        if (playlistNow === playlist[a]) z = a;
    }
    // Redéfinir UlPlaylist qui s'est perdu dans les bois
    UlPlaylist = playlist[z].getElementsByTagName("ul")[0];
    for (var b = 0; b <= UlPlaylist.childElementCount - 1; b++) {
        if (thisElement.id === UlPlaylist.children[b].id) {
            var thisNow = UlPlaylist.children[b];
            var titleNow = UlPlaylist.children[b].innerHTML;
        }
    }
    playerPlaylist[z] = thisElement.parentNode.parentNode.getElementsByTagName("audio")[0];
    playerPlaylist[z].src = backward[z].id;
    playerPlaylist[z].nextElementSibling.getElementsByClassName("title")[0].innerHTML = titleNow;
    forwardAndBackward(z, thisNow);
}

function forwardFunction(thisElement)
{
    clearInterval(time);
    clearInterval(interval);
    var playlistNow = thisElement.parentNode.parentNode;
    for (var a = 0; a <= playlist.length - 1; a++) {
        if (playlistNow === playlist[a]) z = a;
    }
    UlPlaylist = playlist[z].getElementsByTagName("ul")[0];
    for (var b = 0; b <= UlPlaylist.childElementCount - 1; b++) {
        if (thisElement.id === UlPlaylist.children[b].id) {
            var thisNow = UlPlaylist.children[b];
            var titleNow = UlPlaylist.children[b].innerHTML;
        }
    }
    playerPlaylist[z] = thisElement.parentNode.parentNode.getElementsByTagName("audio")[0];
    playerPlaylist[z].src = forward[z].id;
    playerPlaylist[z].nextElementSibling.getElementsByClassName("title")[0].innerHTML = titleNow;
    forwardAndBackward(z, thisNow);
}

function forwardAndBackward(z, thisNow)
{
    var childrens = thisNow.parentNode.children;
    for (var a = 0; a <= childrens.length - 1; a++) {
        childrens[a].classList.remove("active");
    }
    thisNow.classList.add("active");
    if (thisNow.nextElementSibling !== null) {
        next[z] = thisNow.nextElementSibling.id;
        forward[z].id = next[z];
    } else {
        next[z] = thisNow.parentNode.children[0].id;
        forward[z].id = next[z];
    }
    if (thisNow.previousElementSibling !== null) {
        backward[z].id = thisNow.previousElementSibling.id;
    } else {
        backward[z].id = thisNow.parentNode.lastElementChild.id;
    }
    for (var k = 0; k <= audio.length - 1; k++) {
        audio[k].pause();
        audio[k].nextElementSibling.getElementsByClassName("play")[0].style.display = null;
        audio[k].nextElementSibling.getElementsByClassName("pause")[0].style.display = "none";
    }
    playerPlaylist[z].nextElementSibling.getElementsByClassName("play")[0].style.display = "none";
    playerPlaylist[z].nextElementSibling.getElementsByClassName("pause")[0].style.display = null;
    playerPlaylist[z].play();
    Timer(false, true);
}

});
              
            
!
999px

Console