webmusic/webmusic.js

let audioPlayer  = new Audio();
let playerState  = "idle";
let continuous   = true;
let repeat       = false;
let total        = 0;
let index        = 0;

const handleKeyEvent = (event) => {
	switch (event.key) {
		case " ":
		case "p":
			if (playerState == "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;
	}
};

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

	document.getElementById("state").addEventListener("click", togglePlayback)
	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 () {
		setPlayerState("idle");
		nextTrack();
	});

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

	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;
	updatePlayerState();
	updateButtonState();
}

const setPlayerState = (state) => {
	playerState = state;

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

const updatePlayerState = () => {
	let statestr = "[" + playerState;

	if (!audioPlayer.paused) {
		statestr += " " + formatTime(audioPlayer.currentTime) + "/" + formatTime(audioPlayer.duration);
	}

	statestr += "]";
	document.getElementById("state").innerHTML = statestr;
}

const updateButtonState = () => {
	if (repeat !== false) {
		document.getElementById('repeatButton').style.color = '#6b9969';
	} else {
		document.getElementById('repeatButton').style.color = null;
	}

	if (continuous !== false) {
		document.getElementById('continuousButton').style.color = '#6b9969';
	} else {
		document.getElementById('continuousButton').style.color = null;
	}
}


const 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;

	setPlayerState("loading");
	audioPlayer.load();
	
	element.classList.add("playing");
}

const togglePlayback = () => {
	if (audioPlayer.paused) {
		audioPlayer.play();
	} else {
		audioPlayer.pause();
	}
}

const toggleRepeat = () => {
	repeat = !repeat;
	continuous = !repeat;
	audioPlayer.loop = repeat;
	updateButtonState();
}

const toggleContinue = () => {
	continuous = !continuous;
	updateButtonState();
}

const previousTrack = () => {
	if (!continuous) return;
	if (index-- === 0) index = total-1;

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

	playSong(index);
}

const nextTrack = () => {
	if (!continuous) return;
	if (++index === total) index = 0;

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

	playSong(index);
}

const formatTime = (secs) => {
	secs = Math.round(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);