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

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

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