diff --git a/webmusic.js b/webmusic.js index 3da097c..ba6bff6 100644 --- a/webmusic.js +++ b/webmusic.js @@ -3,16 +3,16 @@ const audioPlayer = new Audio(); let selectedItem = 0; let playingItem = 0; -let playerState = "idle"; +let playerState = 'idle'; let continuous = true; let repeat = false; let total = 0; const handleKeyEvent = (event) => { switch (event.key) { - case " ": - case "p": - if (playerState == "idle" && total !== 0) { + case ' ': + case 'p': + if (playerState == 'idle' && total !== 0) { if (document.getElementById(playingItem).classList.contains('dir')) { return nextTrack(); } @@ -23,23 +23,23 @@ const handleKeyEvent = (event) => { } break; - case "r": + case 'r': toggleRepeat(); break; - case "c": + case 'c': toggleContinue(); break; - case "ArrowUp": + case 'ArrowUp': selectPreviousItem(); break; - case "ArrowDown": + case 'ArrowDown': selectNextItem(); break; - case "ArrowLeft": + case 'ArrowLeft': if (audioPlayer.currentTime < 10) { audioPlayer.currentTime = 0; } else { @@ -47,51 +47,51 @@ const handleKeyEvent = (event) => { } break; - case "ArrowRight": + case 'ArrowRight': audioPlayer.currentTime = audioPlayer.currentTime+10; break; - case "Enter": + case 'Enter': document.getElementById(selectedItem).click() break; - case "Escape": - document.getElementById("back").click(); + case 'Escape': + document.getElementById('back').click(); break; } }; const initState = () => { - const dirElements = document.querySelectorAll(".dir"); - const fileElements = document.querySelectorAll(".file"); + 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) + document.getElementById('state').addEventListener('click', togglePlayback) + document.getElementById('repeatButton').addEventListener('click', toggleRepeat) + document.getElementById('continuousButton').addEventListener('click', toggleContinue) - audioPlayer.addEventListener("canplay", () => { + audioPlayer.addEventListener('canplay', () => { audioPlayer.play(); }); - audioPlayer.addEventListener("play", () => { - setPlayerState("playing"); + audioPlayer.addEventListener('play', () => { + setPlayerState('playing'); }); - audioPlayer.addEventListener("pause", () => { - setPlayerState("paused"); + audioPlayer.addEventListener('pause', () => { + setPlayerState('paused'); }); - audioPlayer.addEventListener("error", () => { - setPlayerState("error loading track"); + audioPlayer.addEventListener('error', () => { + setPlayerState('error loading track'); }); - audioPlayer.addEventListener("ended", () => { - setPlayerState("idle"); + audioPlayer.addEventListener('ended', () => { + setPlayerState('idle'); nextTrack(); }); - audioPlayer.addEventListener("timeupdate", () => { + audioPlayer.addEventListener('timeupdate', () => { updatePlayerState(); }); @@ -102,7 +102,7 @@ const initState = () => { fileElements.forEach((element) => { element.id = id++; - element.addEventListener("click", (event) => { + element.addEventListener('click', (event) => { event.preventDefault(); event.stopPropagation(); playSong(event.target.id); @@ -117,19 +117,19 @@ const initState = () => { const setPlayerState = (state) => { playerState = state; - console.log("now in state: " + state); + console.log('now in state: ' + state); updatePlayerState(); } const updatePlayerState = () => { - let statestr = "[" + playerState; + let statestr = '[' + playerState; if (!audioPlayer.paused) { - statestr += " " + formatTime(audioPlayer.currentTime) + "/" + formatTime(audioPlayer.duration); + statestr += ' ' + formatTime(audioPlayer.currentTime) + '/' + formatTime(audioPlayer.duration); } - statestr += "]"; - document.getElementById("state").innerHTML = statestr; + statestr += ']'; + document.getElementById('state').innerHTML = statestr; } const updateButtonState = () => { @@ -153,8 +153,8 @@ const playSong = (id) => { if (element === null) return; if (element.classList.contains('dir')) return; - if (document.getElementsByClassName("playing").length > 0) { - document.getElementsByClassName("playing")[0].classList.remove("playing"); + if (document.getElementsByClassName('playing').length > 0) { + document.getElementsByClassName('playing')[0].classList.remove('playing'); } playingItem = element.id; @@ -163,10 +163,10 @@ const playSong = (id) => { audioPlayer.src = element.href; - setPlayerState("loading"); + setPlayerState('loading'); audioPlayer.load(); - element.classList.add("playing"); + element.classList.add('playing'); } const togglePlayback = () => { @@ -222,8 +222,8 @@ const selectNextItem = () => { } const updateSelectedItem = () => { - if (document.getElementsByClassName("selected").length > 0) { - document.getElementsByClassName("selected")[0].classList.remove("selected"); + if (document.getElementsByClassName('selected').length > 0) { + document.getElementsByClassName('selected')[0].classList.remove('selected'); } document.getElementById(selectedItem).classList.add('selected');