webmusic.js: replace howler with the native Audio() element

webmusic.js

@@ -4,15 +4,7 @@ let continuelist = true;
 let total = 0;
 let index = 0;
 
-let sound = new Howl({
+let sound = new Audio();
-	src: [''],
-	format: "mp3",
-	html5: true
-});
-
-setInterval(function () {
-	updateState();
-}, 1000);
 
 window.onload = function () {
 	initState();
@@ -51,15 +43,15 @@ window.onkeyup = function (event) {
 			break;
 
 		case "ArrowLeft":
-			if (sound.seek() < 10) {
+			if (sound.currentTime < 10) {
-				sound.seek(0);
+				sound.currentTime = 0;
 			} else {
-				sound.seek(sound.seek()-10);
+				sound.currentTime = sound.currentTime-10;
 			}
 			break;
 
 		case "ArrowRight":
-			sound.seek(sound.seek()+10);
+			sound.currentTime = sound.currentTime+10;
 			break;
 
 		case "Escape":
@@ -93,10 +85,10 @@ function initState() {
 }
 
 function togglePlayback() {
-	if (sound.playing()) {
+	if (sound.paused) {
-		sound.pause();
-	} else {
 		sound.play();
+	} else {
+		sound.pause();
 	}
 }
 
@@ -120,44 +112,46 @@ function playSong(id) {
 
 	index = element.id;
 
-	sound.stop();
+	sound.pause()
-	sound.unload();
+	sound.src = element.href;
-	sound = null;
-	delete sound;
-
-	sound = new Howl({
-		src: [element.href],
-		html5: true
-	});
 
 	setState("loading");
-	sound.play();
+	sound.load();
-	sound.loop(repeat);
+
+	sound.loop = repeat;
 	
 	element.classList.add("playing");
 
-	sound.on("play", function () {
+	sound.addEventListener("canplay", function () {
+		sound.play();
+	});
+
+	sound.addEventListener("play", function () {
 		setState("playing");
 	});
-	sound.on("loaderror", function () {
+
-		setState("error loading track")
+	sound.addEventListener("pause", function () {
+		setState("paused");
 	});
-	sound.on("playerror", function () {
+
-		setState("error opening audio device")
+	sound.addEventListener("error", function () {
+		setState("error loading track");
 	});
-	sound.on("end", function () {
+
+	sound.addEventListener("ended", function () {
 		setState("idle");
-		nextTrack()
+		nextTrack();
 	});
-	sound.on("pause", function () {
+
-		setState("paused")
+	sound.addEventListener("timeupdate", function () {
+		updateState();
 	});
 }
 
 function toggleRepeat() {
 	repeat = !repeat;
 	continuelist = !repeat;
-	sound.loop(repeat);
+	sound.loop = repeat;
 	updateState();
 }
 
@@ -169,8 +163,9 @@ function toggleContinue() {
 function updateState() {
 	let statestr = "[";
 	statestr += gstate;
-	if (sound.playing()) {
+
-		statestr += " " + formatTime(Math.round(sound.seek())) + "/" + formatTime(Math.round(sound.duration()));
+	if (!sound.paused) {
+		statestr += " " + formatTime(Math.round(sound.currentTime)) + "/" + formatTime(Math.round(sound.duration));
 	}
 
 	statestr += "]";