webmusic.js: bind to audioplayer-events just once

webmusic.js

@@ -63,6 +63,32 @@ const initState = () => {
 	document.getElementById("repeatButton").addEventListener("click", toggleRepeat)
 	document.getElementById("continuousButton").addEventListener("click", toggleContinue)
 
+	audioPlayer.addEventListener("canplay", function () {
+		audioPlayer.play();
+	});
+
+	audioPlayer.addEventListener("play", function () {
+		setPlayerState("playing");
+	});
+
+	audioPlayer.addEventListener("pause", function () {
+		setPlayerState("paused");
+	});
+
+	audioPlayer.addEventListener("error", function () {
+		setPlayerState("error loading track");
+	});
+
+	audioPlayer.addEventListener("ended", function () {
+		console.log("end track: " + index);
+		setPlayerState("idle");
+		nextTrack();
+	});
+
+	audioPlayer.addEventListener("timeupdate", function () {
+		updatePlayerState();
+	});
+
 	dirElements.forEach(function(element){
 		element.id = id++;
 	});
@@ -116,6 +142,7 @@ const updateButtonState = () => {
 
 
 const playSong = (id) => {
+	console.log("track id:" +id)
 	let element = document.getElementById(id);
 
 	if (element === null) return;
@@ -131,36 +158,10 @@ const playSong = (id) => {
 	audioPlayer.src = element.href;
 
 	setPlayerState("loading");
-	audioPlayer.load();
 
 	audioPlayer.loop = repeat;
 	
 	element.classList.add("playing");
-
-	audioPlayer.addEventListener("canplay", function () {
-		audioPlayer.play();
-	});
-
-	audioPlayer.addEventListener("play", function () {
-		setPlayerState("playing");
-	});
-
-	audioPlayer.addEventListener("pause", function () {
-		setPlayerState("paused");
-	});
-
-	audioPlayer.addEventListener("error", function () {
-		setPlayerState("error loading track");
-	});
-
-	audioPlayer.addEventListener("ended", function () {
-		setPlayerState("idle");
-		nextTrack();
-	});
-
-	audioPlayer.addEventListener("timeupdate", function () {
-		updatePlayerState();
-	});
 }
 
 const togglePlayback = () => {