webmusic.js: general code improvements
This commit is contained in:
parent
6a9dd5b051
commit
1cf5c13e2b
99
webmusic.js
99
webmusic.js
|
@ -1,17 +1,11 @@
|
||||||
let gstate = "idle";
|
let audioPlayer = new Audio();
|
||||||
let repeat = false;
|
|
||||||
let continuelist = true;
|
let continuelist = true;
|
||||||
let total = 0;
|
let gstate = "idle";
|
||||||
let index = 0;
|
let repeat = false;
|
||||||
|
let total = 0;
|
||||||
|
let index = 0;
|
||||||
|
|
||||||
let audioPlayer = new Audio();
|
const handleKeyEvent = (event) => {
|
||||||
|
|
||||||
window.onload = function () {
|
|
||||||
initState();
|
|
||||||
updateState()
|
|
||||||
};
|
|
||||||
|
|
||||||
window.onkeyup = function (event) {
|
|
||||||
switch (event.key) {
|
switch (event.key) {
|
||||||
case " ":
|
case " ":
|
||||||
case "p":
|
case "p":
|
||||||
|
@ -60,7 +54,7 @@ window.onkeyup = function (event) {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
function 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;
|
||||||
|
@ -82,25 +76,40 @@ function initState() {
|
||||||
});
|
});
|
||||||
|
|
||||||
total = id;
|
total = id;
|
||||||
|
updateState()
|
||||||
}
|
}
|
||||||
|
|
||||||
function togglePlayback() {
|
const setState = (state) => {
|
||||||
if (audioPlayer.paused) {
|
|
||||||
audioPlayer.play();
|
|
||||||
} else {
|
|
||||||
audioPlayer.pause();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function setState(state) {
|
|
||||||
gstate = state;
|
gstate = state;
|
||||||
|
|
||||||
console.log("now in state: " + state);
|
console.log("now in state: " + state);
|
||||||
updateState();
|
updateState();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const updateState = () => {
|
||||||
|
let statestr = "[";
|
||||||
|
statestr += gstate;
|
||||||
|
|
||||||
function playSong(id) {
|
if (!audioPlayer.paused) {
|
||||||
|
statestr += " " + formatTime(Math.round(audioPlayer.currentTime)) + "/" + formatTime(Math.round(audioPlayer.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 + "]";
|
||||||
|
}
|
||||||
|
|
||||||
|
const playSong = (id) => {
|
||||||
let element = document.getElementById(id);
|
let element = document.getElementById(id);
|
||||||
|
|
||||||
if (element === null) return;
|
if (element === null) return;
|
||||||
|
@ -148,42 +157,27 @@ function playSong(id) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggleRepeat() {
|
const togglePlayback = () => {
|
||||||
|
if (audioPlayer.paused) {
|
||||||
|
audioPlayer.play();
|
||||||
|
} else {
|
||||||
|
audioPlayer.pause();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const toggleRepeat = () => {
|
||||||
repeat = !repeat;
|
repeat = !repeat;
|
||||||
continuelist = !repeat;
|
continuelist = !repeat;
|
||||||
audioPlayer.loop = repeat;
|
audioPlayer.loop = repeat;
|
||||||
updateState();
|
updateState();
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggleContinue() {
|
const toggleContinue = () => {
|
||||||
continuelist = !continuelist;
|
continuelist = !continuelist;
|
||||||
updateState();
|
updateState();
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateState() {
|
const previousTrack = () => {
|
||||||
let statestr = "[";
|
|
||||||
statestr += gstate;
|
|
||||||
|
|
||||||
if (!audioPlayer.paused) {
|
|
||||||
statestr += " " + formatTime(Math.round(audioPlayer.currentTime)) + "/" + formatTime(Math.round(audioPlayer.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 (index-- === 0) index = total-1;
|
||||||
|
|
||||||
if (document.getElementById(index).classList.contains('dir')) {
|
if (document.getElementById(index).classList.contains('dir')) {
|
||||||
|
@ -195,7 +189,7 @@ function previousTrack() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function nextTrack() {
|
const nextTrack = () => {
|
||||||
if (++index === total) index = 0;
|
if (++index === total) index = 0;
|
||||||
|
|
||||||
if (document.getElementById(index).classList.contains('dir')) {
|
if (document.getElementById(index).classList.contains('dir')) {
|
||||||
|
@ -207,8 +201,11 @@ function nextTrack() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function formatTime(secs) {
|
const formatTime = (secs) => {
|
||||||
const minutes = Math.floor(secs / 60) || 0;
|
const minutes = Math.floor(secs / 60) || 0;
|
||||||
const seconds = (secs - minutes * 60) || 0;
|
const seconds = (secs - minutes * 60) || 0;
|
||||||
return minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
|
return minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', initState);
|
||||||
|
document.addEventListener('keydown', handleKeyEvent);
|
||||||
|
|
Loading…
Reference in a new issue