2021-03-07 14:10:10 +01:00
|
|
|
let audioPlayer = new Audio();
|
2021-03-07 16:38:28 +01:00
|
|
|
let selectedItem = 0;
|
|
|
|
let playingItem = 0;
|
2021-03-07 15:22:50 +01:00
|
|
|
let playerState = "idle";
|
2021-03-07 15:01:24 +01:00
|
|
|
let continuous = true;
|
2021-03-07 14:10:10 +01:00
|
|
|
let repeat = false;
|
|
|
|
let total = 0;
|
2019-05-11 23:23:27 +02:00
|
|
|
|
2021-03-07 14:10:10 +01:00
|
|
|
const handleKeyEvent = (event) => {
|
2021-03-06 20:32:48 +01:00
|
|
|
switch (event.key) {
|
|
|
|
case " ":
|
|
|
|
case "p":
|
2021-03-07 15:22:50 +01:00
|
|
|
if (playerState == "idle" && total !== 0) {
|
2021-03-07 16:38:28 +01:00
|
|
|
if (document.getElementById(playingItem).classList.contains('dir')) {
|
2021-03-07 01:13:22 +01:00
|
|
|
return nextTrack();
|
|
|
|
}
|
|
|
|
|
2021-03-07 16:38:28 +01:00
|
|
|
playSong(playingItem)
|
2021-03-06 20:32:48 +01:00
|
|
|
} else {
|
|
|
|
togglePlayback();
|
|
|
|
}
|
|
|
|
break;
|
|
|
|
|
|
|
|
case "r":
|
|
|
|
toggleRepeat();
|
|
|
|
break;
|
|
|
|
|
|
|
|
case "c":
|
|
|
|
toggleContinue();
|
|
|
|
break;
|
|
|
|
|
|
|
|
case "ArrowUp":
|
2021-03-07 16:38:28 +01:00
|
|
|
selectPreviousItem();
|
2021-03-06 20:32:48 +01:00
|
|
|
break;
|
|
|
|
|
|
|
|
case "ArrowDown":
|
2021-03-07 16:38:28 +01:00
|
|
|
selectNextItem();
|
2021-03-06 20:32:48 +01:00
|
|
|
break;
|
|
|
|
|
|
|
|
case "ArrowLeft":
|
2021-03-07 13:38:29 +01:00
|
|
|
if (audioPlayer.currentTime < 10) {
|
|
|
|
audioPlayer.currentTime = 0;
|
2021-03-06 20:32:48 +01:00
|
|
|
} else {
|
2021-03-07 13:38:29 +01:00
|
|
|
audioPlayer.currentTime = audioPlayer.currentTime-10;
|
2021-03-06 20:32:48 +01:00
|
|
|
}
|
|
|
|
break;
|
|
|
|
|
|
|
|
case "ArrowRight":
|
2021-03-07 13:38:29 +01:00
|
|
|
audioPlayer.currentTime = audioPlayer.currentTime+10;
|
2021-03-06 20:32:48 +01:00
|
|
|
break;
|
|
|
|
|
2021-03-07 16:38:28 +01:00
|
|
|
case "Enter":
|
|
|
|
document.getElementById(selectedItem).click()
|
|
|
|
break;
|
|
|
|
|
2021-03-06 20:32:48 +01:00
|
|
|
case "Escape":
|
|
|
|
document.getElementById("back").click();
|
|
|
|
break;
|
|
|
|
}
|
2021-03-05 20:59:37 +01:00
|
|
|
};
|
2019-05-11 23:23:27 +02:00
|
|
|
|
2021-03-07 14:10:10 +01:00
|
|
|
const initState = () => {
|
2021-03-06 22:52:55 +01:00
|
|
|
const dirElements = document.querySelectorAll(".dir");
|
|
|
|
const fileElements = document.querySelectorAll(".file");
|
2021-03-07 01:24:44 +01:00
|
|
|
let id = 0;
|
2021-03-06 22:52:55 +01:00
|
|
|
|
2021-03-07 01:24:44 +01:00
|
|
|
document.getElementById("state").addEventListener("click", togglePlayback)
|
2021-03-07 15:01:24 +01:00
|
|
|
document.getElementById("repeatButton").addEventListener("click", toggleRepeat)
|
|
|
|
document.getElementById("continuousButton").addEventListener("click", toggleContinue)
|
2021-03-06 22:52:55 +01:00
|
|
|
|
2021-03-07 15:47:48 +01:00
|
|
|
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();
|
|
|
|
});
|
|
|
|
|
2021-03-06 22:52:55 +01:00
|
|
|
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;
|
2021-03-07 15:16:55 +01:00
|
|
|
updatePlayerState();
|
2021-03-07 15:01:24 +01:00
|
|
|
updateButtonState();
|
2021-03-06 22:52:55 +01:00
|
|
|
}
|
2019-05-11 23:23:27 +02:00
|
|
|
|
2021-03-07 15:16:55 +01:00
|
|
|
const setPlayerState = (state) => {
|
2021-03-07 15:22:50 +01:00
|
|
|
playerState = state;
|
2021-03-06 20:36:43 +01:00
|
|
|
|
2021-03-06 20:32:48 +01:00
|
|
|
console.log("now in state: " + state);
|
2021-03-07 15:16:55 +01:00
|
|
|
updatePlayerState();
|
2019-05-11 23:23:27 +02:00
|
|
|
}
|
|
|
|
|
2021-03-07 15:16:55 +01:00
|
|
|
const updatePlayerState = () => {
|
2021-03-07 15:22:50 +01:00
|
|
|
let statestr = "[" + playerState;
|
2021-03-07 14:10:10 +01:00
|
|
|
|
|
|
|
if (!audioPlayer.paused) {
|
2021-03-07 15:01:24 +01:00
|
|
|
statestr += " " + formatTime(audioPlayer.currentTime) + "/" + formatTime(audioPlayer.duration);
|
2021-03-07 14:10:10 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
statestr += "]";
|
|
|
|
document.getElementById("state").innerHTML = statestr;
|
|
|
|
}
|
|
|
|
|
2021-03-07 15:01:24 +01:00
|
|
|
const updateButtonState = () => {
|
|
|
|
if (repeat !== false) {
|
2021-03-07 16:44:27 +01:00
|
|
|
document.getElementById('repeatButton').classList.add('active');
|
2021-03-07 15:01:24 +01:00
|
|
|
} else {
|
2021-03-07 16:44:27 +01:00
|
|
|
document.getElementById('repeatButton').classList.remove('active');
|
2021-03-07 15:01:24 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
if (continuous !== false) {
|
2021-03-07 16:44:27 +01:00
|
|
|
document.getElementById('continuousButton').classList.add('active');
|
2021-03-07 15:01:24 +01:00
|
|
|
} else {
|
2021-03-07 16:44:27 +01:00
|
|
|
document.getElementById('continuousButton').classList.remove('active');
|
2021-03-07 15:01:24 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2021-03-07 14:10:10 +01:00
|
|
|
const playSong = (id) => {
|
2021-03-06 22:52:55 +01:00
|
|
|
let element = document.getElementById(id);
|
|
|
|
|
|
|
|
if (element === null) return;
|
|
|
|
if (element.classList.contains('dir')) return;
|
|
|
|
|
2021-03-06 20:36:43 +01:00
|
|
|
if (document.getElementsByClassName("playing").length > 0) {
|
2021-03-06 20:32:48 +01:00
|
|
|
document.getElementsByClassName("playing")[0].classList.remove("playing");
|
2021-03-06 20:36:43 +01:00
|
|
|
}
|
|
|
|
|
2021-03-07 16:38:28 +01:00
|
|
|
playingItem = element.id;
|
2021-03-06 22:52:55 +01:00
|
|
|
|
2021-03-07 13:38:29 +01:00
|
|
|
audioPlayer.pause()
|
2021-03-07 16:10:01 +01:00
|
|
|
|
2021-03-07 13:38:29 +01:00
|
|
|
audioPlayer.src = element.href;
|
2021-03-06 20:32:48 +01:00
|
|
|
|
2021-03-07 15:16:55 +01:00
|
|
|
setPlayerState("loading");
|
2021-03-07 16:10:01 +01:00
|
|
|
audioPlayer.load();
|
2021-03-06 20:32:48 +01:00
|
|
|
|
2021-03-06 22:52:55 +01:00
|
|
|
element.classList.add("playing");
|
2019-05-11 23:23:27 +02:00
|
|
|
}
|
|
|
|
|
2021-03-07 14:10:10 +01:00
|
|
|
const togglePlayback = () => {
|
|
|
|
if (audioPlayer.paused) {
|
|
|
|
audioPlayer.play();
|
|
|
|
} else {
|
|
|
|
audioPlayer.pause();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const toggleRepeat = () => {
|
2021-03-06 20:32:48 +01:00
|
|
|
repeat = !repeat;
|
2021-03-07 15:01:24 +01:00
|
|
|
continuous = !repeat;
|
2021-03-07 13:38:29 +01:00
|
|
|
audioPlayer.loop = repeat;
|
2021-03-07 15:01:24 +01:00
|
|
|
updateButtonState();
|
2019-05-11 23:23:27 +02:00
|
|
|
}
|
|
|
|
|
2021-03-07 14:10:10 +01:00
|
|
|
const toggleContinue = () => {
|
2021-03-07 15:01:24 +01:00
|
|
|
continuous = !continuous;
|
|
|
|
updateButtonState();
|
2019-05-11 23:23:27 +02:00
|
|
|
}
|
|
|
|
|
2021-03-07 14:10:10 +01:00
|
|
|
const previousTrack = () => {
|
2021-03-07 16:10:01 +01:00
|
|
|
if (!continuous) return;
|
2021-03-07 16:38:28 +01:00
|
|
|
if (playingItem-- === 0) playingItem = total-1;
|
2021-03-06 20:36:43 +01:00
|
|
|
|
2021-03-07 16:38:28 +01:00
|
|
|
if (document.getElementById(playingItem).classList.contains('dir')) {
|
2021-03-07 01:13:22 +01:00
|
|
|
return previousTrack();
|
|
|
|
}
|
|
|
|
|
2021-03-07 16:38:28 +01:00
|
|
|
playSong(playingItem);
|
2021-03-05 23:10:43 +01:00
|
|
|
}
|
|
|
|
|
2021-03-07 14:10:10 +01:00
|
|
|
const nextTrack = () => {
|
2021-03-07 16:10:01 +01:00
|
|
|
if (!continuous) return;
|
2021-03-07 16:38:28 +01:00
|
|
|
if (++playingItem === total) playingItem = 0;
|
2021-03-06 20:36:43 +01:00
|
|
|
|
2021-03-07 16:38:28 +01:00
|
|
|
if (document.getElementById(playingItem).classList.contains('dir')) {
|
2021-03-07 01:13:22 +01:00
|
|
|
return nextTrack();
|
|
|
|
}
|
|
|
|
|
2021-03-07 16:38:28 +01:00
|
|
|
playSong(playingItem);
|
|
|
|
}
|
|
|
|
|
|
|
|
const selectPreviousItem = () => {
|
|
|
|
if (selectedItem-- === 0) selectedItem = total-1;
|
|
|
|
updateSelectedItem();
|
|
|
|
}
|
|
|
|
|
|
|
|
const selectNextItem = () => {
|
|
|
|
if (++selectedItem === total) selectedItem = 0;
|
|
|
|
updateSelectedItem();
|
|
|
|
}
|
|
|
|
|
|
|
|
const updateSelectedItem = () => {
|
|
|
|
if (document.getElementsByClassName("selected").length > 0) {
|
|
|
|
document.getElementsByClassName("selected")[0].classList.remove("selected");
|
|
|
|
}
|
|
|
|
|
|
|
|
document.getElementById(selectedItem).classList.add('selected');
|
2019-05-11 23:23:27 +02:00
|
|
|
}
|
|
|
|
|
2021-03-07 14:10:10 +01:00
|
|
|
const formatTime = (secs) => {
|
2021-03-07 15:01:24 +01:00
|
|
|
secs = Math.round(secs);
|
2021-03-06 20:32:48 +01:00
|
|
|
const minutes = Math.floor(secs / 60) || 0;
|
|
|
|
const seconds = (secs - minutes * 60) || 0;
|
|
|
|
return minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
|
2021-03-06 14:47:36 +01:00
|
|
|
}
|
2021-03-07 14:10:10 +01:00
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', initState);
|
|
|
|
document.addEventListener('keydown', handleKeyEvent);
|