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

webmusic.js: refactor continuous- and repeat-button handling

This commit is contained in:
Leah 2021-03-07 15:01:24 +01:00
parent 1cf5c13e2b
commit 94ed0d208d
1 changed files with 30 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
webmusic.js
View File

@ -1,7 +1,7 @@
let audioPlayer = new Audio();
let continuelist = true;
let gstate = "idle";
let continuous = true;
let repeat = false;
let gstate = "idle";
let total = 0;
let index = 0;
@ -60,6 +60,8 @@ const initState = () => {
let id = 0;
document.getElementById("state").addEventListener("click", togglePlayback)
document.getElementById("repeatButton").addEventListener("click", toggleRepeat)
document.getElementById("continuousButton").addEventListener("click", toggleContinue)
dirElements.forEach(function(element){
element.id = id++;
@ -76,7 +78,8 @@ const initState = () => {
});
total = id;
updateState()
updateState();
updateButtonState();
}
const setState = (state) => {
@ -87,28 +90,31 @@ const setState = (state) => {
}
const updateState = () => {
let statestr = "[";
statestr += gstate;
let statestr = "[" + gstate;
if (!audioPlayer.paused) {
statestr += " " + formatTime(Math.round(audioPlayer.currentTime)) + "/" + formatTime(Math.round(audioPlayer.duration));
statestr += " " + formatTime(audioPlayer.currentTime) + "/" + formatTime(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 updateButtonState = () => {
if (repeat !== false) {
document.getElementById('repeatButton').style.color = '#6b9969';
} else {
document.getElementById('repeatButton').style.color = null;
}
if (continuous !== false) {
document.getElementById('continuousButton').style.color = '#6b9969';
} else {
document.getElementById('continuousButton').style.color = null;
}
}
const playSong = (id) => {
let element = document.getElementById(id);
@ -167,14 +173,14 @@ const togglePlayback = () => {
const toggleRepeat = () => {
repeat = !repeat;
continuelist = !repeat;
continuous = !repeat;
audioPlayer.loop = repeat;
updateState();
updateButtonState();
}
const toggleContinue = () => {
continuelist = !continuelist;
updateState();
continuous = !continuous;
updateButtonState();
}
const previousTrack = () => {
@ -184,7 +190,7 @@ const previousTrack = () => {
return previousTrack();
}
if (continuelist) {
if (continuous) {
playSong(index)
}
}
@ -196,12 +202,13 @@ const nextTrack = () => {
return nextTrack();
}
if (continuelist) {
if (continuous) {
playSong(index)
}
}
const formatTime = (secs) => {
secs = Math.round(secs);
const minutes = Math.floor(secs / 60) || 0;
const seconds = (secs - minutes * 60) || 0;
return minutes + ':' + (seconds < 10 ? '0' : '') + seconds;