215 lines
4 KiB
JavaScript
215 lines
4 KiB
JavaScript
let gstate = "idle";
|
|
let repeat = false;
|
|
let continuelist = true;
|
|
let total = 0;
|
|
let index = 0;
|
|
|
|
let sound = 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 (sound.currentTime < 10) {
|
|
sound.currentTime = 0;
|
|
} else {
|
|
sound.currentTime = sound.currentTime-10;
|
|
}
|
|
break;
|
|
|
|
case "ArrowRight":
|
|
sound.currentTime = sound.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 (sound.paused) {
|
|
sound.play();
|
|
} else {
|
|
sound.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;
|
|
|
|
sound.pause()
|
|
sound.src = element.href;
|
|
|
|
setState("loading");
|
|
sound.load();
|
|
|
|
sound.loop = repeat;
|
|
|
|
element.classList.add("playing");
|
|
|
|
sound.addEventListener("canplay", function () {
|
|
sound.play();
|
|
});
|
|
|
|
sound.addEventListener("play", function () {
|
|
setState("playing");
|
|
});
|
|
|
|
sound.addEventListener("pause", function () {
|
|
setState("paused");
|
|
});
|
|
|
|
sound.addEventListener("error", function () {
|
|
setState("error loading track");
|
|
});
|
|
|
|
sound.addEventListener("ended", function () {
|
|
setState("idle");
|
|
nextTrack();
|
|
});
|
|
|
|
sound.addEventListener("timeupdate", function () {
|
|
updateState();
|
|
});
|
|
}
|
|
|
|
function toggleRepeat() {
|
|
repeat = !repeat;
|
|
continuelist = !repeat;
|
|
sound.loop = repeat;
|
|
updateState();
|
|
}
|
|
|
|
function toggleContinue() {
|
|
continuelist = !continuelist;
|
|
updateState();
|
|
}
|
|
|
|
function updateState() {
|
|
let statestr = "[";
|
|
statestr += gstate;
|
|
|
|
if (!sound.paused) {
|
|
statestr += " " + formatTime(Math.round(sound.currentTime)) + "/" + formatTime(Math.round(sound.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;
|
|
}
|