// DragonPlay : Player Javascript // https://web.silvercherry.fr/player.html // Version 21.24.1 (Year, week, version) by SilverCherry (Marine Latour) - CC-BY "use strict";document.addEventListener("DOMContentLoaded",function(){var o=document.getElementsByTagName("audio"),e=document.getElementsByTagName("head")[0],t=document.createElement("style");t.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}",e.appendChild(t);for(var n=document.getElementsByClassName("play"),l=document.getElementsByClassName("pause"),d=document.getElementsByClassName("backward"),p=document.getElementsByClassName("forward"),r=0;r<=o.length-1;r++){o[r].insertAdjacentHTML("afterend",'