126 lines
No EOL
4.2 KiB
HTML
126 lines
No EOL
4.2 KiB
HTML
<style>
|
|
.media-container {
|
|
width: 90%;
|
|
}
|
|
|
|
.audio-player {
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 100%;
|
|
}
|
|
.audio-player p{
|
|
width: fit-content;
|
|
}
|
|
|
|
.media-seek {
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
<div class="media-container">
|
|
<div class="audio-player">
|
|
<audio onloadedmetadata="setup_audio_metadata(event)" ontimeupdate="setup_audio_metadata(event)">
|
|
<source src='{{.Site.BaseURL}}{{.Get "src" }}'>
|
|
</audio>
|
|
<button onclick="toggle_play_audio(event)">Play</button>
|
|
<input class="media-seek" type="range" onchange="update_audio_time(event)" value="0">
|
|
<select onchange="update_audio_speed(event)">
|
|
<option value="1" selected>1x</option>
|
|
<option value="1.5">1.5x</option>
|
|
<option value="2">2x</option>
|
|
<option value="2.5">2.5x</option>
|
|
<option value="3">3x</option>
|
|
</select>
|
|
<div class="audio-preview">
|
|
</div>
|
|
<p><span class="audio-currentTime"></span><span class="audio-duration"></span></p>
|
|
<button onclick="toggle_loop_audio(event)">Loop</button>
|
|
<script>
|
|
function setup_audio_metadata(event) {
|
|
audio = event.target;
|
|
var seek = audio.parentElement.children[2];
|
|
seek.min = 0;
|
|
seek.max = audio.duration;
|
|
seek.value = audio.currentTime;
|
|
audio.parentElement.children[5].children[0].innerHTML = "" + timeToText(audio.currentTime) + "/";
|
|
audio.parentElement.children[5].children[1].innerHTML = "" + timeToText(audio.duration);
|
|
}
|
|
function toggle_loop_audio(event) {
|
|
audio = event.target.parentElement.children[0];
|
|
audio.loop = !audio.loop;
|
|
}
|
|
function update_audio_time(event) {
|
|
audio = event.target.parentElement.children[0];
|
|
audio.currentTime = event.target.value;
|
|
}
|
|
function toggle_play_audio(event) {
|
|
el = event.target;
|
|
audio = event.target.parentElement.children[0];
|
|
speed = el.parentElement.children[3].value;
|
|
audio.playbackRate = speed;
|
|
|
|
if (audio.paused) {
|
|
audio.play();
|
|
el.innerHTML = "Pause";
|
|
}
|
|
else {
|
|
audio.pause();
|
|
el.innerHTML = "Play"
|
|
}
|
|
}
|
|
function update_audio_speed(event) {
|
|
el = event.target;
|
|
audio = event.target.parentElement.children[0];
|
|
audio.playbackRate = el.value;
|
|
|
|
}
|
|
function timeToText(t) {
|
|
hours = 0;
|
|
minutes = 0;
|
|
seconds = 0;
|
|
if (t > 60 * 60) {
|
|
hours = Math.floor(t / 60 / 60);
|
|
t = t - hours * 60 * 60;
|
|
}
|
|
if (t > 60) {
|
|
minutes = Math.floor(t / 60);
|
|
t = t - minutes * 60
|
|
|
|
}
|
|
if (t > 1) {
|
|
seconds = Math.floor(t);
|
|
}
|
|
text = "";
|
|
if (hours > 0) {
|
|
text += hours + ":";
|
|
}
|
|
if (minutes > 0 || hours > 0) {
|
|
if (minutes == 0) {
|
|
minutes = "00"
|
|
}
|
|
if (minutes < 10) {
|
|
text += "0"
|
|
}
|
|
text += minutes + ":"
|
|
}
|
|
if (seconds == 0 && (minutes > 0 || hours > 0)) {
|
|
seconds = "00";
|
|
}
|
|
if (seconds < 10) {
|
|
text += "0";
|
|
}
|
|
text += seconds
|
|
return text;
|
|
}
|
|
</script>
|
|
</div>
|
|
<noscript>
|
|
<style>
|
|
.audio-player {
|
|
display: none;
|
|
}
|
|
</style>
|
|
<audio controls preload="false">
|
|
<source src='{{.Site.BaseURL}}{{.Get "src" }}'>
|
|
</audio>
|
|
</noscript>
|
|
</div> |