Add buffered percentage bar

src/components/Player.astro

@@ -213,6 +213,7 @@ const initialQueue = await Promise.all(
       this.UI.times.duration.textContent = this.formatTime(
         Math.round(data.duration)
       );
+      this.UI.progress.buffered.style.width = "0%";
 
       // Keep track of the index we are currently playing.
       this.index = index;
@@ -299,6 +300,8 @@ const initialQueue = await Promise.all(
       this.UI.progress.played.style.width =
         ((seek / sound.duration()) * 100 || 0) + "%";
 
+      this.UI.progress.buffered.style.width = `${this.getBufferedAmount(sound).bufferedPercent}%`;
+
       // If the sound is still playing, continue stepping.
       if (sound.playing()) {
         requestAnimationFrame(this.step.bind(this));
@@ -325,6 +328,20 @@ const initialQueue = await Promise.all(
       }
     }
 
+    getBufferedAmount(sound) {
+      if (sound._sounds.length > 0) {
+        const audioNode = sound._sounds[0]._node; // The underlying HTML5 Audio element
+        if (audioNode.buffered.length > 0) {
+          const bufferedEnd = audioNode.buffered.end(0); // Time (seconds) where buffering ends
+          const duration = audioNode.duration;
+          const bufferedSeconds = bufferedEnd;
+          const bufferedPercent = duration ? (bufferedEnd / duration) * 100 : 0;
+          return { bufferedSeconds, bufferedPercent };
+        }
+      }
+      return { bufferedSeconds: 0, bufferedPercent: 0 };
+    }
+
     addFromTrackCard(track) {
       var current = this.playlist[this.index];