valor/layouts/shortcodes/audio.html

126 lines
4.2 KiB
HTML
Raw Normal View History

2022-11-09 15:44:31 -05:00
<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>