59 lines
1.7 KiB
HTML
59 lines
1.7 KiB
HTML
{% extends "base.html" %}
|
|
{% block style %}
|
|
<link rel="stylesheet" href="/post/page.css"/>
|
|
<link rel="stylesheet" href="/song.css"/>
|
|
{% endblock style %}
|
|
{% block title %}
|
|
{{ page.title }}
|
|
{% 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 %}
|
|
<h1 id="title">
|
|
{{ page.title }}
|
|
</h1>
|
|
<div id="controls">
|
|
<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">
|
|
</div>
|
|
<div id="page_content">
|
|
{{ page.content | safe }}
|
|
</div>
|
|
<script>
|
|
const audio = document.getElementById("audio");
|
|
const playbutton = document.getElementById("playbutton");
|
|
const seek = document.getElementById("seek");
|
|
let playing = false;
|
|
seek.value = 0.0;
|
|
|
|
playbutton.addEventListener("click", () => {
|
|
if (playing) {
|
|
audio.pause();
|
|
playbutton.textContent = "play_arrow";
|
|
} else {
|
|
audio.play();
|
|
playbutton.textContent = "pause";
|
|
}
|
|
playing = !playing;
|
|
});
|
|
audio.addEventListener("timeupdate", () => {
|
|
const progress = (audio.currentTime / audio.duration);
|
|
seek.value = progress;
|
|
});
|
|
|
|
seek.addEventListener("change", () => {
|
|
audio.currentTime = audio.duration * seek.value;
|
|
const progress = (audio.currentTime / audio.duration);
|
|
seek.value = progress;
|
|
});
|
|
|
|
|
|
</script>
|
|
{% endblock content %}
|