Thursday, November 14, 2019

i stole the basic logic of this out of a forum, then added the extra buttons in. if you want a playlist, it's about as simple as it gets.

no js. no css. you can do that yourself. just paste this into an html document...

//back button. it just keeps going, so don't be stupid.
<button type="button" onclick="Player.src = nextsrc[--elm]; Player.play();">&lt;</button>

//html5 player
<audio autoplay controls id="Player" src="track 1"></audio>

//forward button. likewise, there's no end, here.
<button type="button" onclick="Player.src = nextsrc[++elm]; Player.play();">&gt;</button>

//tracklisting
<table>
<tr><td><button type="button" onclick="Player.src = nextsrc[0]; Player.play();">1</button></td></tr>
<tr><td><button type="button" onclick="Player.src = nextsrc[1]; Player.play();">2</button></td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
.
.
.
</table>
</p>

//"script"
<script>
var nextsrc = [track list];
var elm = 0; var Player = document.getElementById('Player');
Player.onended = function(){
    if(++elm < nextsrc.length){   
         Player.src = nextsrc[elm]; Player.play();
    }
}
</script>

that's it.