Make player able to play audio

2 files changed, 59 insertions, 8 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);
diff --git a/ui/html/music_player.tmpl.html b/ui/html/music_player.tmpl.html
index e58a9c0..be6cf99 100644
--- a/ui/html/music_player.tmpl.html
+++ b/ui/html/music_player.tmpl.html
@@ -3,23 +3,19 @@
 <div id="music_player">
     <div class="vert_align center">
         <div class="vert_align">
-            <div id="mp_track_name">Track Name</div>
-            <div id="mp_track_artist">Artist</div>
-        </div>
-        <div class="vert_align">
-            <div id="mp_prev_track" class="vert_align" onclick="mpPrevTrack()">
+            <div id="mp_prev_track" class="vert_align">
                 <img src="/static/get?file=images/chevron_left.svg" alt="Previous Track">
             </div>
-            <div id="mp_pp_track" class="vert_align" onclick="mpPpTrack()">
+            <div id="mp_pp_track" class="vert_align">
                 <img src="/static/get?file=images/play.svg" alt="Play">
             </div>
-            <div id="mp_next_track" class="vert_align" onclick="mpNextTrack()">
+            <div id="mp_next_track" class="vert_align">
                 <img src="/static/get?file=images/chevron_right.svg" alt="Next Track">
             </div>
         </div>
         <div class="slider_container vert_align">
             <div id="mp_current_time" class="vert_align">00:00</div>
-            <input type="range" class="vert_align" min="1" max="100" value="0" class="seek_slider" onchange="mpSeekTo()">
+            <input type="range" id="mp_seek_slider" class="vert_align" min="1" max="100" value="0">
             <div id="mp_total_duration" class="vert_align">00:00</div>
         </div>
         <select name="Tracks" id="mp_tracks"></select>