webmusic.js: navigating through files/folders with arrowkeys/enter
This commit is contained in:
parent
155e7c1bbb
commit
6d0e9c999d
47
webmusic.js
47
webmusic.js
|
@ -1,20 +1,21 @@
|
|||
let audioPlayer = new Audio();
|
||||
let selectedItem = 0;
|
||||
let playingItem = 0;
|
||||
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')) {
|
||||
if (document.getElementById(playingItem).classList.contains('dir')) {
|
||||
return nextTrack();
|
||||
}
|
||||
|
||||
playSong(index)
|
||||
playSong(playingItem)
|
||||
} else {
|
||||
togglePlayback();
|
||||
}
|
||||
|
@ -29,11 +30,11 @@ const handleKeyEvent = (event) => {
|
|||
break;
|
||||
|
||||
case "ArrowUp":
|
||||
previousTrack();
|
||||
selectPreviousItem();
|
||||
break;
|
||||
|
||||
case "ArrowDown":
|
||||
nextTrack();
|
||||
selectNextItem();
|
||||
break;
|
||||
|
||||
case "ArrowLeft":
|
||||
|
@ -48,6 +49,10 @@ const handleKeyEvent = (event) => {
|
|||
audioPlayer.currentTime = audioPlayer.currentTime+10;
|
||||
break;
|
||||
|
||||
case "Enter":
|
||||
document.getElementById(selectedItem).click()
|
||||
break;
|
||||
|
||||
case "Escape":
|
||||
document.getElementById("back").click();
|
||||
break;
|
||||
|
@ -150,7 +155,7 @@ const playSong = (id) => {
|
|||
document.getElementsByClassName("playing")[0].classList.remove("playing");
|
||||
}
|
||||
|
||||
index = element.id;
|
||||
playingItem = element.id;
|
||||
|
||||
audioPlayer.pause()
|
||||
|
||||
|
@ -184,24 +189,42 @@ const toggleContinue = () => {
|
|||
|
||||
const previousTrack = () => {
|
||||
if (!continuous) return;
|
||||
if (index-- === 0) index = total-1;
|
||||
if (playingItem-- === 0) playingItem = total-1;
|
||||
|
||||
if (document.getElementById(index).classList.contains('dir')) {
|
||||
if (document.getElementById(playingItem).classList.contains('dir')) {
|
||||
return previousTrack();
|
||||
}
|
||||
|
||||
playSong(index);
|
||||
playSong(playingItem);
|
||||
}
|
||||
|
||||
const nextTrack = () => {
|
||||
if (!continuous) return;
|
||||
if (++index === total) index = 0;
|
||||
if (++playingItem === total) playingItem = 0;
|
||||
|
||||
if (document.getElementById(index).classList.contains('dir')) {
|
||||
if (document.getElementById(playingItem).classList.contains('dir')) {
|
||||
return nextTrack();
|
||||
}
|
||||
|
||||
playSong(index);
|
||||
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');
|
||||
}
|
||||
|
||||
const formatTime = (secs) => {
|
||||
|
|
Loading…
Reference in a new issue