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();"><</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();">></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.