webmusic/webmusic.js

let gstate = "idle";
let repeat = false;
let continuelist = true;
let total = 0;
let index = 0;

let audioPlayer = new Audio();

window.onload = function () {
	initState();
	updateState()
};

window.onkeyup = function (event) {
	switch (event.key) {
		case " ":
		case "p":
			if (gstate == "idle" && total !== 0) {
				if (document.getElementById(index).classList.contains('dir')) {
					return nextTrack();
				}

				playSong(index)
			} else {
				togglePlayback();
			}
			break;

		case "r":
			toggleRepeat();
			break;

		case "c":
			toggleContinue();
			break;

		case "ArrowUp":
			previousTrack();
			break;

		case "ArrowDown":
			nextTrack();
			break;

		case "ArrowLeft":
			if (audioPlayer.currentTime < 10) {
				audioPlayer.currentTime = 0;
			} else {
				audioPlayer.currentTime = audioPlayer.currentTime-10;
			}
			break;

		case "ArrowRight":
			audioPlayer.currentTime = audioPlayer.currentTime+10;
			break;

		case "Escape":
			document.getElementById("back").click();
			break;
	}
};

function initState() {
	const dirElements  = document.querySelectorAll(".dir");
	const fileElements = document.querySelectorAll(".file");
	let   id           = 0;

	document.getElementById("state").addEventListener("click", togglePlayback)

	dirElements.forEach(function(element){
		element.id = id++;
	});

	fileElements.forEach(function(element){
		element.id = id++;

		element.addEventListener("click", function(event) {
			event.preventDefault();
			event.stopPropagation();
			playSong(event.target.id);
		});
	});

	total = id;
}

function togglePlayback() {
	if (audioPlayer.paused) {
		audioPlayer.play();
	} else {
		audioPlayer.pause();
	}
}

function setState(state) {
	gstate = state;

	console.log("now in state: " + state);
	updateState();
}


function playSong(id) {
	let element = document.getElementById(id);

	if (element === null) return;
	if (element.classList.contains('dir')) return;

	if (document.getElementsByClassName("playing").length > 0) {
		document.getElementsByClassName("playing")[0].classList.remove("playing");
	}

	index = element.id;

	audioPlayer.pause()
	audioPlayer.src = element.href;

	setState("loading");
	audioPlayer.load();

	audioPlayer.loop = repeat;
	
	element.classList.add("playing");

	audioPlayer.addEventListener("canplay", function () {
		audioPlayer.play();
	});

	audioPlayer.addEventListener("play", function () {
		setState("playing");
	});

	audioPlayer.addEventListener("pause", function () {
		setState("paused");
	});

	audioPlayer.addEventListener("error", function () {
		setState("error loading track");
	});

	audioPlayer.addEventListener("ended", function () {
		setState("idle");
		nextTrack();
	});

	audioPlayer.addEventListener("timeupdate", function () {
		updateState();
	});
}

function toggleRepeat() {
	repeat = !repeat;
	continuelist = !repeat;
	audioPlayer.loop = repeat;
	updateState();
}

function toggleContinue() {
	continuelist = !continuelist;
	updateState();
}

function updateState() {
	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')) {
		return previousTrack();
	}

	if (continuelist) {
		playSong(index)
	}
}

function nextTrack() {
	if (++index === total) index = 0;

	if (document.getElementById(index).classList.contains('dir')) {
		return nextTrack();
	}

	if (continuelist) {
		playSong(index)
	}
}

function formatTime(secs) {
	const minutes = Math.floor(secs / 60) || 0;
	const seconds = (secs - minutes * 60) || 0;
	return minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
}