get the audio player working on firefox

templates/song.html

@@ -8,6 +8,9 @@
 {% endblock title %}
 {% block content %}
 <div id="player">
+    {% if page.extra.cover_src %}
+    <img id="cover" src="{{ page.extra.cover_src }}"/>
+    {% endif %}
     {% if page.extra.cover %}
         <img id="cover" src="{{ page.extra.cover }}"/>
     {% endif %}
@@ -15,7 +18,7 @@
         {{ page.title }}
     </h1>
     <div id="controls">
-        <button id="playbutton">▶</button>
+        <button id="playbutton" class="material-symbols-sharp">play_arrow</button>
         <input type="range" class="seek" id="seek" max="1" value="0" step="0.001">
     </div>
     <audio id="audio" controls src="{{ page.extra.src }}" style="display:none" preload="metadata">
@@ -27,16 +30,16 @@
     const audio = document.getElementById("audio");
     const playbutton = document.getElementById("playbutton");
     const seek = document.getElementById("seek");
-    seek.value = 0.0;
     let playing = false;
+    seek.value = 0.0;
 
     playbutton.addEventListener("click", () => {
         if (playing) {
             audio.pause();
-            playbutton.textContent = "▶";
+            playbutton.textContent = "play_arrow";
         } else {
             audio.play();
-            playbutton.textContent = "⏸";
+            playbutton.textContent = "pause";
         }
         playing = !playing;
     });
@@ -47,7 +50,10 @@
 
     seek.addEventListener("change", () => {
         audio.currentTime = audio.duration * seek.value;
+        const progress = (audio.currentTime / audio.duration);
+        seek.value = progress;
     });
+
     
 </script>
 {% endblock content %}