zotan/webmusic
1
0
Fork 1
Code Issues Pull requests Releases Wiki Activity

webmusic.js: use single quotes everywhere

Browse source
This commit is contained in:
Leah 2021-03-07 17:10:18 +01:00
parent db8b55cadc
commit d9bed3ac47
1 changed files with 40 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
webmusic.js
View file

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