Untitled

<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<title>PlayAudio</title>

		<style type="text/css">

		</style>
	</head>

	<body>
		<audio id="audioplayer" controls>
			Your browser does not support the <code>audio</code> element.
		</audio>
		<button id="audioplayer_next">next</button>
		<button id="audioplayer_prev">prev</button>

		<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
		<script type="text/javascript">
			const audiofiles = [
				"https://herrnewstime-c79y309rh.now.sh/1.mp3",
				"https://herrnewstime-c79y309rh.now.sh/2.mp3",
				"https://herrnewstime-c79y309rh.now.sh/3.mp3"
			];

			let position = 0;
			let audioElement = $("#audioplayer");
			let audioSource = $("<source></source>");
			audioSource.attr('src', audiofiles[position]);
			audioElement.append(audioSource);
			document.querySelector('#audioplayer').load();

			audioElement.on('ended', function() {
				++position;
				if(position >= audiofiles.length) position = 0;
				audioSource.attr('src', audiofiles[position]);
				document.querySelector('#audioplayer').load();
			});

			$('#audioplayer_next').click(function() {
				++position;
				if(position >= audiofiles.length) position = 0;
				console.log(position);
				audioSource.attr('src', audiofiles[position]);
				document.querySelector('#audioplayer').load();
			});

			$('#audioplayer_prev').click(function() {
				--position;
				if(position < 0) position = 0;
				audioSource.attr('src', audiofiles[position]);
				document.querySelector('#audioplayer').load();
			});
		</script>
	</body>
</html>