get the audio player working on firefox

content/project/apollo/index.md

@@ -4,4 +4,5 @@ date = "2025-05-25"
 template = "song.html"
 [extra]
 src = "apollo.mp3"
+cover_src = "cover.png"
 +++

sass/_base.scss

@@ -26,7 +26,7 @@ body {
 body {
   background-color: c.$base;
 }
-h1, h2, h3, h4, h5, h6, p, a{
+li, h1, h2, h3, h4, h5, h6, p, a{
   color: c.$text;
   font-family: "Source Code VF";
 }

sass/_font.css

@@ -9,12 +9,12 @@
     font-weight: 200 900;
     font-style: normal;
     font-stretch: normal;
-    src: url('/font/WOFF2/VF/SourceCodeVF-Upright.ttf.woff2') format('woff2-variations'),
+    src: url('/font/source-code-pro/WOFF2/VF/SourceCodeVF-Upright.ttf.woff2') format('woff2-variations'),
-         url('/font/WOFF2/VF/SourceCodeVF-Upright.ttf.woff2') format('woff2 supports variations'),
+         url('/font/source-code-pro/WOFF2/VF/SourceCodeVF-Upright.ttf.woff2') format('woff2 supports variations'),
-         url('/font/WOFF/VF/SourceCodeVF-Upright.ttf.woff') format('woff-variations'),
+         url('/font/source-code-pro/WOFF/VF/SourceCodeVF-Upright.ttf.woff') format('woff-variations'),
-         url('/font/WOFF/VF/SourceCodeVF-Upright.ttf.woff') format('woff supports variations'),
+         url('/font/source-code-pro/WOFF/VF/SourceCodeVF-Upright.ttf.woff') format('woff supports variations'),
-         url('/font/VF/SourceCodeVF-Upright.ttf') format('truetype-variations'),
+         url('/font/source-code-pro/VF/SourceCodeVF-Upright.ttf') format('truetype-variations'),
-         url('/font/VF/SourceCodeVF-Upright.ttf') format('truetype supports variations');
+         url('/font/source-code-pro/VF/SourceCodeVF-Upright.ttf') format('truetype supports variations');
 }
 
 @font-face{
@@ -22,10 +22,10 @@
     font-weight: 200 900;
     font-style: italic;
     font-stretch: normal;
-    src: url('/font/WOFF2/VF/SourceCodeVF-Italic.ttf.woff2') format('woff2-variations'),
+    src: url('/font/source-code-pro/WOFF2/VF/SourceCodeVF-Italic.ttf.woff2') format('woff2-variations'),
-         url('/font/WOFF2/VF/SourceCodeVF-Italic.ttf.woff2') format('woff2 supports variations'),
+         url('/font/source-code-pro/WOFF2/VF/SourceCodeVF-Italic.ttf.woff2') format('woff2 supports variations'),
-         url('/font/WOFF/VF/SourceCodeVF-Italic.ttf.woff') format('woff-variations'),
+         url('/font/source-code-pro/WOFF/VF/SourceCodeVF-Italic.ttf.woff') format('woff-variations'),
-         url('/font/WOFF/VF/SourceCodeVF-Italic.ttf.woff') format('woff supports variations'),
+         url('/font/source-code-pro/WOFF/VF/SourceCodeVF-Italic.ttf.woff') format('woff supports variations'),
-         url('/font/VF/SourceCodeVF-Italic.ttf') format('truetype-variations'),
+         url('/font/source-code-pro/VF/SourceCodeVF-Italic.ttf') format('truetype-variations'),
-         url('/font/VF/SourceCodeVF-Italic.ttf') format('truetype supports variations');
+         url('/font/source-code-pro/VF/SourceCodeVF-Italic.ttf') format('truetype supports variations');
 }

sass/song.scss

@@ -4,13 +4,31 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+@use '_icons';
+
+
+main {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
 #player {
-  margin: auto;
+  padding-bottom: 50px;
+  width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
 }
 
+#cover {
+  padding-top: 35px;
+  width: 100%;
+  max-width: 300px;
+  margin: auto;
+}
+
 #title {
   text-align: center;
 }
@@ -21,20 +39,22 @@
 }
 
 #playbutton {
-  width: 8%;
+  width: 15%;
+  max-width: 65px;
   aspect-ratio: 1/1;
-  margin-right: 15px;
+  margin-right: min(15px, 2%);
   background: #313244;
   border: none;
   color: #cba6f7;
   border-radius: 100%;
   line-height: 100%;
   text-align: center;
+  font-size: min(8cqw, 40px);
 }
 
 .seek {
   -webkit-appearance: none;
-  margin-left: 15px;
+  margin-left: min(15px, 2%);
   width: 100%;
   height: 8px;
 }

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 %}