instruction and codes for mp3 player-the tracks no matter the duration can be up to 3 hours and more

1) My Network⭐,Custom Code :ADD javascript.

<!-- Audio player JS code start -->

<script>
document.addEventListener('DOMContentLoaded', lifeGiver)
function lifeGiver() {
var audio;var playlist;var tracks;var current;
initaudio();
function initaudio(){
current=0;
audio=x$('audio');
playlist=x$('#playlist');
tracks=playlist.find('li a');
len=tracks.length-1;
audio[0].volume=1;
playlist.find('a').click(function(e){e.preventDefault();
link=x$(this);
current=link.parent().index();
runaudio(link,audio[0])});
audio[0].addEventListener('ended',function(e){current++;if(current>len){current=0;link=playlist.find('a')[0]}else{link=playlist.find('a')[current]}runaudio(x$(link),audio[0])})}function runaudio(link,player){player.src=link.attr('href');
par=link.parent();
par.addClass('active').siblings().removeClass('active');
audio[0].load();
audio[0].play()}
}

</script>

<!-- Audio player JS code end -->

2)Now Add the css, go to ADD CUSTOM CSS. 

/* Aspetto del player audio */
#player{ position: relative }
#playlist, #player {
max-width: 500px;
padding: 20px;
margin: 0 auto;
display: block;
width: 100%;
}
#migrationReminder.cookie_usage_banner.top_banner {display:none !important; }
}
#playlist {
margin: 0 auto 20px auto;
display: block;
text-align: center;
font-size: 15px; /* Dimensione caratteri */
font-family: 'Trebuchet MS', Trebuchet, Verdana, sans-serif;
font-weight: normal;
}
#player {
/* Immagine di sfondo del primo contenitore */
background: url(https://storage.ning.com/topology/rest/1.0/file/get/9888749079?prof...);
background-size: 100%;
padding: 80px 7px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border:4px ridge #eed255!important;
width:380px!important;
}
#audio {
width: 100%;
margin: 0 auto;
display: inline-block;
position: absolute;
max-width: 300px;
bottom: 0;
left: 0;
right: 0;
}
#player:after {
/* Immagine animata */
content: url(nonperora);
padding-left: 10px;
}
#playlist {
background: #000000; /* Sfondo del secondo contenitore */
border-top: 2px ridge #800000;
text-align: left;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border:4px ridge #eed255!important;
width:355px!important;
}
#playlist li, #playlist ul li {
background-image: none;
list-style-type: none;
padding: 4px;
margin: 3px;
border:3px inset #eed255!important;
}
#playlist li a {
color: #CCC; /* Colore del brano musicale */
background: #000; /* Sfondo del brano musicale */
padding: 7px 5px;
display: block;
padding-left: 10px;
text-decoration: none;
}
#playlist li a:hover{
background: #800000; /* Colore dello sfondo al passare del mouse */
text-decoration: none;
}
#playlist .active a {
color: #eed255; /* Colore del brano attivo */
font-style: italic;
font-weight:bold;
text-decoration: none;
}
#playlist .active a:before {
/* Icona prima del brano attivo */
content: "\25B6";
color: #CCC;
font-style: normal;
padding-right: 8px;
}
#playlist .active a:hover {
color: #222; /* Colore del brano attivo al passaggio del mouse */
}
#vplaylist, #vplayer {
width: 400px; /* Larghezza del contenitore */
padding: 20px;
margin: 0 auto;
display: block;
text-align: center;
}
#vplayer {
padding: 10px 20px;
background: #000; /* Colore di sfondo del primo contenitore */
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
video {
width:400px; /* Larghezza del player */
padding-top: 10px;
margin:0 auto;
display: inline-block
}
#vplaylist {
margin: 0 auto 20px auto;
display: block;
background: #424242; /* Colore di sfondo del secondo contenitore */
border-top: 5px solid #9F111B;
border-bottom-left-right-radius: 10px;
border-bottom-right-radius: 10px;
text-align: left;
font-size: 12px;
font-family: 'Trebuchet MS', Trebuchet, Verdana, sans-serif;
font-weight: normal;
}
#vplaylist li, #vplaylist ul li {
background-image: none;
list-style-type: none;
padding: 0;
margin: 0;
}
#vplaylist li a:hover{
background: #9F111B; /* Colore di sfondo al passaggio del mouse */
text-decoration: none;
}
#vplaylist .active a {
color: #B11623; /* Colore del video attivo */
font-style: italic;
text-decoration: none;
}
#vplaylist .active a:before {
/* Icona prima del video attivo */
content: "\25B6";
color: #CCC;
font-style: normal;
padding-right: 8px;
}
#vplaylist .active a:hover {
color: #222; /* Colore del video attivo al passaggio del mouse */
}
#playlist{ max-height: 350px; overflow-y: auto; }
#player{ position: relative }

3)Now Add your music in the HTML box NOW LET'S CHANGE THE MUSIC IN THE BOX, REMEMBER THAT THE FIRST AND THE SECOND MUST BE THE SAME MP3

<div id="player"><br />
<audio id="audio" preload="auto" controls="controls" tabindex="0"><br />
<source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"><br />
Il tuo browser non supporta HTML5.<br /></source></audio><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"></source></div>
<ul id="playlist">
<li class="active"><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"><a href="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original">1) The Agonist- Thank You Pain</a></source></li>
<li style="list-style: none;"><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"></source></li>
<li><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"><a href="https://storage.ning.com/topology/rest/1.0/file/get/8268964062?profile=original">2) Arch Enemy - No Gods No Masters</a></source></li>
<li><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"><a href="https://storage.ning.com/topology/rest/1.0/file/get/7975682464?profile=original">3) Bullet for My Valentine - Tears Don't Fall</a></source></li>
<li><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"><a href="https://storage.ning.com/topology/rest/1.0/file/get/8268919298?profile=original">4) Deals Death - Fortifed</a></source></li>
<li style="list-style: none;"><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"></source></li>
<li><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"><a href="https://storage.ning.com/topology/rest/1.0/file/get/7983332660?profile=original">5) Dark Flood - Never Free Never Yours</a></source></li>
<li><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"><a href="https://storage.ning.com/topology/rest/1.0/file/get/7996926262?profile=original">6) The last Hangmen - The Hypocrite</a></source></li>
<li><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"><a href="https://storage.ning.com/topology/rest/1.0/file/get/7996651675?profile=original">7) JUDICATOR - Let There Be Nothing</a></source></li>
<li><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"><a href="https://storage.ning.com/topology/rest/1.0/file/get/7983353071?profile=original">8) Cadacross - Learn the Dark</a></source></li>
<li><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"><a href="https://storage.ning.com/topology/rest/1.0/file/get/7996896701?profile=original">9) insomnium one for sorrow</a></source></li>
<li><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"><a href="https://storage.ning.com/topology/rest/1.0/file/get/7983474464?profile=original">10) SILENT HAVOC - Poseidon - Tides</a></source></li>
<li style="list-style: none;"><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"></source></li>
<li><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"><a href="https://storage.ning.com/topology/rest/1.0/file/get/7977009065?profile=original">11) Marea-El perro verde</a></source></li>
<li><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"><a href="https://storage.ning.com/topology/rest/1.0/file/get/7983634698?profile=original">12) Midnattsol - A Predator's Prey</a></source></li>
<li><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"><a href="https://storage.ning.com/topology/rest/1.0/file/get/7983638453?profile=original">13) Megadeth - Never Dead</a></source></li>
<li><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"><a href="https://storage.ning.com/topology/rest/1.0/file/get/7983563300?profile=original">14) Akrea - Meteor</a></source></li>
<li style="list-style: none;"><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"></source></li>
<li><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"><a href="https://storage.ning.com/topology/rest/1.0/file/get/7977073864?profile=original">15) Iron Maiden - Como Estais Amigos</a></source></li>
<li><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"><a href="https://storage.ning.com/topology/rest/1.0/file/get/8268879876?profile=original">16) Gorod- Carved In The Wind</a></source></li>
<li><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"><a href="https://storage.ning.com/topology/rest/1.0/file/get/7983688476?profile=original">17) The Ocean - She Was The Universe</a></source></li>
<li><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"><a href="https://storage.ning.com/topology/rest/1.0/file/get/7983708665?profile=original">18) Thousand Year War - Tyrants And Men</a></source></li>
<li><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"><a href="https://storage.ning.com/topology/rest/1.0/file/get/8268866270?profile=original">19) Dark Eternity - Aeon</a></source></li>
<li><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"><a href="https://storage.ning.com/topology/rest/1.0/file/get/7983462855?profile=original">20) Wayne-The Choice</a></source></li>
<li><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"><a href="https://storage.ning.com/topology/rest/1.0/file/get/7976889901?profile=original">21) Black Label Society - Suicide Messiah</a></source></li>
<li><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"><a href="https://storage.ning.com/topology/rest/1.0/file/get/7975711665?profile=original">22) Motörhead - Ace of Spades</a></source></li>
<li><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"><a href="https://storage.ning.com/topology/rest/1.0/file/get/7996932865?profile=original">23) Foghat - My Babe</a></source></li>
<li><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"><a href="https://storage.ning.com/topology/rest/1.0/file/get/7996986457?profile=original">24) Windir - Dance of Mortal Lust</a></source></li>
<li><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"><a href="https://storage.ning.com/topology/rest/1.0/file/get/7996994265?profile=original">25) Nightwish - Dead Boy's Poem</a></source></li>
<li><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"><a href="https://storage.ning.com/topology/rest/1.0/file/get/7996996267?profile=original">26) Six Magics - No time to grieve</a></source></li>
<li><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"><a href="https://storage.ning.com/topology/rest/1.0/file/get/7997036859?profile=original">27) Rotting Christ - Demonon Vrosis</a></source></li>
<li><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"><a href="https://storage.ning.com/topology/rest/1.0/file/get/7997038097?profile=original">28) Serpent - Devil In A Dream</a></source></li>
<li><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"><a href="https://storage.ning.com/topology/rest/1.0/file/get/7997070888?profile=original">29) Archaios - The Distant</a></source></li>
<li><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"><a href="https://st5.ning.com/topology/rest/1.0/file/get/7952722052?profile=original">30) Tears of The Dragon - Bruce Dickinson</a></source></li>
<li style="list-style: none;"><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"></source></li>
<li><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"><a href="https://st2.ning.com/topology/rest/1.0/file/get/7135732853?profile=original">31) Sirenia - El Enigma De La Vida</a></source></li>
<li style="list-style: none;"><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"></source></li>
<li><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"><a href="https://st5.ning.com/topology/rest/1.0/file/get/7623405082?profile=original">32) Les Grenouilles - Seth - Akroma</a></source></li>
<li style="list-style: none;"><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"></source></li>
<li><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"><a href="https://st6.ning.com/topology/rest/1.0/file/get/7959097282?profile=original">32) Green Day - 21 Guns</a></source></li>
<li style="list-style: none;"><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"></source></li>
<li><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"><a href="https://st5.ning.com/topology/rest/1.0/file/get/7178270089?profile=original">33) ERADICATOR - Madness Is My Name</a></source></li>
<li style="list-style: none;"><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"></source></li>
<li class="active"><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"><a href="https://storage.ning.com/topology/rest/1.0/file/get/7996574879?profile=original">34) Red Moon Architect - Rise</a></source></li>
<li><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"><a href="https://storage.ning.com/topology/rest/1.0/file/get/7983505479?profile=original">35) We are the Damned - Diogo Alves 1841</a></source></li>
<li><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"><a href="https://storage.ning.com/topology/rest/1.0/file/get/7960146465?profile=original">35) Malinconia - Innocent Story</a></source></li>
<li><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"><a href="https://storage.ning.com/topology/rest/1.0/file/get/7983345299?profile=original">36) Maleficium Arunquilta - Север</a></source></li>
<li style="list-style: none;"><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"></source></li>
<li><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"><a href="https://storage.ning.com/topology/rest/1.0/file/get/7983373700?profile=original">37) Cradle Of Filth - Adest Rosa Secreta Eros</a></source></li>
<li><source src="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original" type="audio/mp3"><a href="https://st5.ning.com/topology/rest/1.0/file/get/7996574879?profile=original">38) Red Moon Architect - Rise</a></source></li>
</ul>

4) Now change my music to yours