<style>
li{
width:150px;
cursor:pointer;
}
li:hover{
color:#1bb;
}
</style>
<audio id=audio controls></audio>
<ul>
<li id="1.mp3">Трек-1</li>
<li id="2.mp3">Трек-2</li>
<li id="3.mp3">Трек-3</li>
<li id="4.mp3">Трек-4</li>
<li id="5.mp3">Трек-5</li>
</ul>
<script>
var alles_li=document.getElementsByTagName("li");
var index=0;
for(i=0;i<alles_li.length;i++){
alles_li[i].innerHTML=" "+alles_li[i].innerHTML;
alles_li[i].id+=("&"+i);
alles_li[i].onclick=function(){
index=this.id.split("&")[1];
play_selected();
}
}
audio.onended=function(){
index++;
if(index<alles_li.length){play_selected()}
else{alles_li[index-1].style.background="#fff"};
}
function play_selected(){
for(j=0;j<alles_li.length;j++){alles_li[j].style.background="#fff"};
alles_li[index].style.background="gold";
audio.src=alles_li[index].id.split("&")[0];
audio.play();
}
</script>