Борис К,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.selected {
font-weight: bold
}
</style>
</head>
<body>
<audio id="player"></audio>
<ul class="playlist"><li data-ogg="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3">#1</li><li data-ogg="https://s3.amazonaws.com/freecodecamp/simonSound2.mp3">#2</li></ul>
<ul class="playlist"><li data-ogg="https://s3.amazonaws.com/freecodecamp/simonSound3.mp3">#3</li><li data-ogg="https://s3.amazonaws.com/freecodecamp/simonSound4.mp3">#4</li></ul>
<script type="text/javascript">
// globals
let _player = document.getElementById("player");
let _sounds = [...document.querySelectorAll(".playlist [data-ogg]")];
let _current = _sounds[0];
// functions
function playlistItemClick(clickedElement) {
if (_current) {
_current.classList.remove("selected");
}
clickedElement.classList.add("selected");
_current = clickedElement;
_player.pause();
_player.src = clickedElement.dataset.ogg;
_player.play();
}
function playNext() {
let i = _sounds.indexOf(_current);
//i = ++i % _sounds.length;
i = Math.min(++i, _sounds.length - 1);
let next = _sounds[i]
if(next != _current) playlistItemClick(next);
}
// event listeners
_player.addEventListener("ended", playNext);
document.addEventListener("click", function (e) {
if (e.target && e.target.closest(".playlist [data-ogg]")) {
playlistItemClick(e.target);
}
});
</script>
</body>
</html>