Here is some code for an example:
<!doctype html>
<html
<head
<title>my audiobook</title
</head
<body
<h1>my audiobook</h1
<audio id="player" controls
<source src="track1.mp3" type="audio/mpeg"
your browser does not support the audio element
</audio
<br
<button onclick="playnexttrack()">next track</button
<br><br
<h2>playlist</h2
<ul id="playlist"
<li class="current">track 1</li
<li>track 2</li
<li>track 3</li
<!-- add more list items for additional tracks --
</ul
<script
// get a reference to the audio player and playlis
var player = document.getelementbyid('player')
var playlist = document.getelementbyid('playlist')
// add a click event listener for each list ite
for (var i = 0; i < playlist.children.length; i++)
playlist.children[i].addeventlistener('click', function()
// set the current track to the selected trac
player.src = this.dataset.trackurl
// update the current class on the list item
for (var j = 0; j < playlist.children.length; j++)
playlist.children[j].classlist.remove('current')
this.classlist.add('current')
})
// define a function to play the next track in the playlis
function playnexttrack()
// find the currently playing trac
var currenttrack = playlist.queryselector('.current')
// if the current track is the last track in the playlist, loop back to the first trac
if (currenttrack == playlist.lastelementchild)
player.src = playlist.firstelementchild.dataset.trackurl
playlist.firstelementchild.classlist.add('current')
} else
// otherwise, play the next track in the playlis
player.src = currenttrack.nextelementsibling.dataset.trackurl
currenttrack.nextelementsibling.classlist.add('current')
// remove the current class from the current trac
currenttrack.classlist.remove('current')
</script
</body
</html
>>>};k};;t{;;{k;k{t };;};{s;k{{m ;;t> >>>>>>>>>>>.>>>>>>>>.remove('current');
}
</script>
</body>
</html>
