webmusic.js: general code improvements

webmusic.js

@@ -1,17 +1,11 @@
-let gstate = "idle";
+let audioPlayer  = new Audio();
-let repeat = false;
 let continuelist = true;
-let total = 0;
+let gstate       = "idle";
-let index = 0;
+let repeat       = false;
+let total        = 0;
+let index        = 0;
 
-let audioPlayer = new Audio();
+const handleKeyEvent = (event) => {
-
-window.onload = function () {
-	initState();
-	updateState()
-};
-
-window.onkeyup = function (event) {
 	switch (event.key) {
 		case " ":
 		case "p":
@@ -60,7 +54,7 @@ window.onkeyup = function (event) {
 	}
 };
 
-function initState() {
+const initState = () => {
 	const dirElements  = document.querySelectorAll(".dir");
 	const fileElements = document.querySelectorAll(".file");
 	let   id           = 0;
@@ -82,25 +76,40 @@ function initState() {
 	});
 
 	total = id;
+	updateState()
 }
 
-function togglePlayback() {
+const setState = (state) => {
-	if (audioPlayer.paused) {
-		audioPlayer.play();
-	} else {
-		audioPlayer.pause();
-	}
-}
-
-function setState(state) {
 	gstate = state;
 
 	console.log("now in state: " + state);
 	updateState();
 }
 
+const updateState = () => {
+	let statestr = "[";
+	statestr += gstate;
 
-function playSong(id) {
+	if (!audioPlayer.paused) {
+		statestr += " " + formatTime(Math.round(audioPlayer.currentTime)) + "/" + formatTime(Math.round(audioPlayer.duration));
+	}
+
+	statestr += "]";
+	document.getElementById("state").innerHTML = statestr;
+	let flags = "[";
+	if (repeat)
+		flags += '<a onclick="toggleRepeat()" href="#" style="color:#6b9969">R</a>';
+	else
+		flags += '<a onclick="toggleRepeat()" href="#">R</a>';
+	if (continuelist)
+		flags += '<a onclick="toggleContinue()" href="#" style="color:#6b9969">C</a>';
+	else
+		flags += '<a onclick="toggleContinue()" href="#">C</a>';
+
+	document.getElementById("flags").innerHTML = flags + "]";
+}
+
+const playSong = (id) => {
 	let element = document.getElementById(id);
 
 	if (element === null) return;
@@ -148,42 +157,27 @@ function playSong(id) {
 	});
 }
 
-function toggleRepeat() {
+const togglePlayback = () => {
+	if (audioPlayer.paused) {
+		audioPlayer.play();
+	} else {
+		audioPlayer.pause();
+	}
+}
+
+const toggleRepeat = () => {
 	repeat = !repeat;
 	continuelist = !repeat;
 	audioPlayer.loop = repeat;
 	updateState();
 }
 
-function toggleContinue() {
+const toggleContinue = () => {
 	continuelist = !continuelist;
 	updateState();
 }
 
-function updateState() {
+const previousTrack = () => {
-	let statestr = "[";
-	statestr += gstate;
-
-	if (!audioPlayer.paused) {
-		statestr += " " + formatTime(Math.round(audioPlayer.currentTime)) + "/" + formatTime(Math.round(audioPlayer.duration));
-	}
-
-	statestr += "]";
-	document.getElementById("state").innerHTML = statestr;
-	let flags = "[";
-	if (repeat)
-		flags += '<a onclick="toggleRepeat()" href="#" style="color:#6b9969">R</a>';
-	else
-		flags += '<a onclick="toggleRepeat()" href="#">R</a>';
-	if (continuelist)
-		flags += '<a onclick="toggleContinue()" href="#" style="color:#6b9969">C</a>';
-	else
-		flags += '<a onclick="toggleContinue()" href="#">C</a>';
-
-	document.getElementById("flags").innerHTML = flags + "]";
-}
-
-function previousTrack() {
 	if (index-- === 0) index = total-1;
 
 	if (document.getElementById(index).classList.contains('dir')) {
@@ -195,7 +189,7 @@ function previousTrack() {
 	}
 }
 
-function nextTrack() {
+const nextTrack = () => {
 	if (++index === total) index = 0;
 
 	if (document.getElementById(index).classList.contains('dir')) {
@@ -207,8 +201,11 @@ function nextTrack() {
 	}
 }
 
-function formatTime(secs) {
+const formatTime = (secs) => {
 	const minutes = Math.floor(secs / 60) || 0;
 	const seconds = (secs - minutes * 60) || 0;
 	return minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
 }
+
+document.addEventListener('DOMContentLoaded', initState);
+document.addEventListener('keydown', handleKeyEvent);