NcamGnrvngu/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

get the audio player working on firefox

Browse source
This commit is contained in:
Ncam Gnrvngu 2025-05-28 19:16:17 +02:00
parent f895565fa9
commit 8c641ce662
Signed by: NcamGnrvngu
GPG key ID: BBF21CBE5628BA99
6 changed files with 48 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
content/project/apollo/cover.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 166 B

1
content/project/apollo/index.md
View file

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

2
sass/_base.scss
View file

@ -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";
}

24
sass/_font.css
View file

@ -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'),
url('/font/WOFF2/VF/SourceCodeVF-Upright.ttf.woff2') format('woff2 supports variations'),
url('/font/WOFF/VF/SourceCodeVF-Upright.ttf.woff') format('woff-variations'),
url('/font/WOFF/VF/SourceCodeVF-Upright.ttf.woff') format('woff supports variations'),
url('/font/VF/SourceCodeVF-Upright.ttf') format('truetype-variations'),
url('/font/VF/SourceCodeVF-Upright.ttf') format('truetype supports variations');
src: url('/font/source-code-pro/WOFF2/VF/SourceCodeVF-Upright.ttf.woff2') format('woff2-variations'),
url('/font/source-code-pro/WOFF2/VF/SourceCodeVF-Upright.ttf.woff2') format('woff2 supports variations'),
url('/font/source-code-pro/WOFF/VF/SourceCodeVF-Upright.ttf.woff') format('woff-variations'),
url('/font/source-code-pro/WOFF/VF/SourceCodeVF-Upright.ttf.woff') format('woff supports variations'),
url('/font/source-code-pro/VF/SourceCodeVF-Upright.ttf') format('truetype-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'),
url('/font/WOFF2/VF/SourceCodeVF-Italic.ttf.woff2') format('woff2 supports variations'),
url('/font/WOFF/VF/SourceCodeVF-Italic.ttf.woff') format('woff-variations'),
url('/font/WOFF/VF/SourceCodeVF-Italic.ttf.woff') format('woff supports variations'),
url('/font/VF/SourceCodeVF-Italic.ttf') format('truetype-variations'),
url('/font/VF/SourceCodeVF-Italic.ttf') format('truetype supports variations');
src: url('/font/source-code-pro/WOFF2/VF/SourceCodeVF-Italic.ttf.woff2') format('woff2-variations'),
url('/font/source-code-pro/WOFF2/VF/SourceCodeVF-Italic.ttf.woff2') format('woff2 supports variations'),
url('/font/source-code-pro/WOFF/VF/SourceCodeVF-Italic.ttf.woff') format('woff-variations'),
url('/font/source-code-pro/WOFF/VF/SourceCodeVF-Italic.ttf.woff') format('woff supports variations'),
url('/font/source-code-pro/VF/SourceCodeVF-Italic.ttf') format('truetype-variations'),
url('/font/source-code-pro/VF/SourceCodeVF-Italic.ttf') format('truetype supports variations');
}

28
sass/song.scss
View file

@ -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;
}

14
templates/song.html
View file

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