Make player able to play audio

1 files changed, 55 insertions, 0 deletions

diff --git a/static/music_player.js b/static/music_player.js
index 8d84774..63fa46c 100644
--- a/static/music_player.js
+++ b/static/music_player.js
@@ -1,3 +1,6 @@
+let audio = document.createElement("audio");
+let tick;
+
 async function mpFetchAsync (url) {
     let response = await fetch(url);
     let data = await response.json();
@@ -5,6 +8,55 @@ async function mpFetchAsync (url) {
     return data;
 }
 
+function mpFormatTime (number) {
+    let min = Math.floor(number / 60);
+    let sec = Math.floor(number - min * 60);
+
+    if (min < 10) { min = "0" + min; }
+    if (sec < 10) { sec = "0" + sec; }
+
+    return min + ":" + sec;
+}
+
+function mpTick () {
+    let seek = document.getElementById("mp_seek_slider");
+    let current = document.getElementById("mp_current_time");
+    let duration = document.getElementById("mp_total_duration");
+
+    let seekPos = 0;
+
+    if (!isNaN(audio.duration)) {
+        seekPos = audio.currentTime * (100 / audio.duration);
+        seek.value = seekPos;
+
+        current.textContent = mpFormatTime(audio.currentTime);
+        duration.textContent = mpFormatTime(audio.duration); // This shouldn't be necessary but initial update doesn't always work???
+    }
+}
+
+async function mpUpdate () {
+    clearInterval(tick);
+
+    const trackSelector = document.getElementById("mp_tracks");
+    const trackName = trackSelector.value;
+
+    let duration = document.getElementById("mp_total_duration");
+    duration.textContent = mpFormatTime(audio.duration);
+
+    audio.src = "/audio/get?file=" + trackName;
+    audio.currentTime = 0;
+
+    tick = setInterval(mpTick, 1000);
+}
+
+function mpIsPlaying() {
+    return !audio.paused;
+}
+
+function mpPpTrack() {
+    mpIsPlaying() ? audio.pause() : audio.play();
+}
+
 const trackList = await mpFetchAsync("/audio");
 let trackSelector = document.getElementById("mp_tracks");
 
@@ -14,3 +66,6 @@ trackList.forEach((track) => {
 
     trackSelector.add(option, 0);
 });
+
+document.getElementById("mp_tracks").addEventListener("change", mpUpdate, false);
+document.getElementById("mp_pp_track").addEventListener("click", mpPpTrack, false);