v2.0: Added Progress Bar

static/js/index.js

@@ -1,25 +1,40 @@
-playState = false;
-sound = document.getElementById('audio');
+let audio = document.getElementById('audio');
+let progress = document.getElementById('progress');
+let stopper = document.getElementById('stopper');
+let current = document.getElementById('current');
+let duration = document.getElementById('duration');
 
-function play(){
-    if(playState == false){
-        playState = true;
-        document.getElementById("stopper").classList.remove("fa-play");
-        document.getElementById("stopper").classList.add("fa-pause");
-
-        sound.play();
+function play() {
+    if (audio.paused) {
+        audio.play();
+        stopper.classList.remove('fa-play');
+        stopper.classList.add('fa-pause');
     } else {
-        playState = false;
-        document.getElementById("stopper").classList.remove("fa-pause");
-        document.getElementById("stopper").classList.add("fa-play");
+        audio.pause();
+        stopper.classList.remove('fa-pause');
+        stopper.classList.add('fa-play');
+    }
+}
+
+function updateProgress() {
+    progress.value = (audio.currentTime / audio.duration) * 100;
+    let min = Math.floor(audio.currentTime / 60);
+    let sec = Math.floor(audio.currentTime % 60);
+    if (sec < 10) {
+        sec = `0${sec}`;
+    }
+    current.innerHTML = `${min}:${sec}`;
+    let durationMin = Math.floor(audio.duration / 60);
+    let durationSec = Math.floor(audio.duration % 60);
+    if (durationSec < 10) {
+        durationSec = `0${durationSec}`;
+    }
+    duration.innerHTML = `${durationMin}:${durationSec}`;
+}
 
-        sound.pause();
-    };
-};
+function setProgress() {
+    audio.currentTime = (progress.value * audio.duration) / 100;
+}
 
-sound.onended = function() {
-    playState = false;
-    document.getElementById("stopper").classList.remove("fa-pause");
-    document.getElementById("stopper").classList.add("fa-play");
-    sound.currentTime = 0;
-}
+audio.addEventListener('timeupdate', updateProgress);
+progress.addEventListener('click', setProgress);

templates/index.html

@@ -41,6 +41,19 @@ <h1 class="title">{{ Title }}</h1>
                             <p class="subtitle">Track: #{{ TrackNum }}</p>
                         </div>
                     </div>
+                    <div class="columns">
+                        <div class="column">
+                            <progress id="progress" class="progress is-primary" value="0" max="100">0%</progress>
+                            <div class="columns">
+                                <div class="column">
+                                    <p id="current">0:00</p>
+                                </div>
+                                <div class="column">
+                                    <p id="duration">0:00</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
                 <div class="block">
                     <div class="buttons">

templates/song.html

@@ -41,6 +41,19 @@ <h1 class="title">{{ Title }}</h1>
                             <p class="subtitle">Track: #{{TrackNum}}</p>
                         </div>
                     </div>
+                    <div class="columns">
+                        <div class="column">
+                            <progress id="progress" class="progress is-primary" value="0" max="100">0%</progress>
+                            <div class="columns">
+                                <div class="column">
+                                    <p id="current">0:00</p>
+                                </div>
+                                <div class="column">
+                                    <p id="duration">0:00</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
                 <div class="block">
                     <div class="buttons">