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 repeat = false;
|
||||
let audioPlayer = new Audio();
|
||||
let continuelist = true;
|
||||
let total = 0;
|
||||
let index = 0;
|
||||
let gstate = "idle";
|
||||
let repeat = false;
|
||||
let total = 0;
|
||||
let index = 0;
|
||||
|
||||
let audioPlayer = new Audio();
|
||||
|
||||
window.onload = function () {
|
||||
initState();
|
||||
updateState()
|
||||
};
|
||||
|
||||
window.onkeyup = function (event) {
|
||||
const handleKeyEvent = (event) => {
|
||||
switch (event.key) {
|
||||
case " ":
|
||||
case "p":
|
||||
|
@ -60,7 +54,7 @@ window.onkeyup = function (event) {
|
|||
}
|
||||
};
|
||||
|
||||
function initState() {
|
||||
const initState = () => {
|
||||
const dirElements = document.querySelectorAll(".dir");
|
||||
const fileElements = document.querySelectorAll(".file");
|
||||
let id = 0;
|
||||
|
@ -82,25 +76,40 @@ function initState() {
|
|||
});
|
||||
|
||||
total = id;
|
||||
updateState()
|
||||
}
|
||||
|
||||
function togglePlayback() {
|
||||
if (audioPlayer.paused) {
|
||||
audioPlayer.play();
|
||||
} else {
|
||||
audioPlayer.pause();
|
||||
}
|
||||
}
|
||||
|
||||
function setState(state) {
|
||||
const setState = (state) => {
|
||||
gstate = state;
|
||||
|
||||
console.log("now in state: " + state);
|
||||
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);
|
||||
|
||||
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;
|
||||
continuelist = !repeat;
|
||||
audioPlayer.loop = repeat;
|
||||
updateState();
|
||||
}
|
||||
|
||||
function toggleContinue() {
|
||||
const toggleContinue = () => {
|
||||
continuelist = !continuelist;
|
||||
updateState();
|
||||
}
|
||||
|
||||
function updateState() {
|
||||
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() {
|
||||
const previousTrack = () => {
|
||||
if (index-- === 0) index = total-1;
|
||||
|
||||
if (document.getElementById(index).classList.contains('dir')) {
|
||||
|
@ -195,7 +189,7 @@ function previousTrack() {
|
|||
}
|
||||
}
|
||||
|
||||
function nextTrack() {
|
||||
const nextTrack = () => {
|
||||
if (++index === total) index = 0;
|
||||
|
||||
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 seconds = (secs - minutes * 60) || 0;
|
||||
return minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', initState);
|
||||
document.addEventListener('keydown', handleKeyEvent);
|
||||
|
|
Loading…
Reference in a new issue