173 lines
No EOL
9.2 KiB
HTML
173 lines
No EOL
9.2 KiB
HTML
<style>
|
|
.audio-player {
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 100%;
|
|
}
|
|
.audio-player p{
|
|
width: fit-content;
|
|
}
|
|
|
|
.media-seek {
|
|
width: 100%;
|
|
}
|
|
.audio-player{
|
|
border: 0.15rem solid var(--theme-accent);
|
|
padding:0.5rem;
|
|
border-radius: 0.5rem;
|
|
color:var(--theme-accent);
|
|
}
|
|
.audio-player>*{
|
|
margin:5px;
|
|
}
|
|
|
|
.audio-player select, .audio-player button{
|
|
background-color: transparent;
|
|
border-color: var(--theme-accent);
|
|
color:var(--theme-accent);
|
|
border-radius: 3px;
|
|
padding:0.5rem;
|
|
}
|
|
|
|
.icon svg{
|
|
width:2.25rem;
|
|
z-index: -1;
|
|
background-color: transparent;
|
|
pointer-events: none;
|
|
}
|
|
.icon path{
|
|
stroke:var(--theme-accent);
|
|
fill:var(--theme-accent);
|
|
}
|
|
|
|
@keyframes spin-icon {
|
|
0%{rotate:0;}
|
|
100%{rotate:360deg;}
|
|
}
|
|
.spin{
|
|
animation:spin-icon 3s linear infinite;
|
|
}
|
|
</style>
|
|
<div class="media-container">
|
|
<div class="audio-player">
|
|
<audio onended="audio_end(event)" onloadedmetadata="setup_audio_metadata(event)" ontimeupdate="setup_audio_metadata(event)">
|
|
<source src='{{.Site.BaseURL}}{{.Get "src" }}'>
|
|
</audio>
|
|
<div class="icon" onclick="toggle_play_audio(event)">
|
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 90 90" enable-background="new 0 0 90 90" xml:space="preserve"><path d="M45,6.421c21.273,0,38.579,17.306,38.579,38.579S66.273,83.578,45,83.578c-21.273,0-38.579-17.306-38.579-38.579 S23.727,6.421,45,6.421 M45,0C20.148,0,0,20.146,0,44.999s20.148,44.999,45,44.999c24.852,0,45-20.146,45-44.999S69.852,0,45,0L45,0 z M65.5,44.999l-31.5-18v36L65.5,44.999z"></path></svg>
|
|
</div>
|
|
<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>
|
|
<div class="icon" onclick="toggle_loop_audio(event)">
|
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><path d="M25.9,45.9c0,0-0.1,0-0.1,0l-9.2,0c-0.4,0-2.1-0.1-3.1-1.5c-0.4-0.6-0.9-1.6-0.5-3C16.4,28.1,24.4,19,36.7,14.6 c15-5.4,28.9-2.2,40.7,9.4l5-4.8c0.4-0.3,1.3-1.1,2.4-1.1c0.9,0,2.4,0.6,2.4,2.8v21.8c0,1.6-1.1,2.9-2.8,3.2c-0.1,0-0.3,0-0.4,0 H62.4c-0.1,0-0.1,0-0.2,0c-0.5-0.1-2.1-0.3-2.6-1.8c-0.2-0.6-0.4-1.7,0.8-2.9l5.3-5.4c-4.8-5.2-10.6-7.6-17.2-7.1 c-9.1,0.8-15.2,5.4-18.6,14.2C28.9,45.2,27.2,45.9,25.9,45.9z M16.7,42.2C16.7,42.2,16.7,42.2,16.7,42.2l9.2,0 c0.1,0,0.3-0.1,0.6-0.6c3.9-10,11.3-15.6,21.7-16.4c8.4-0.7,15.7,2.6,21.5,9.7c0.6,0.7,0.5,1.8-0.1,2.5l-4.9,4.9l18.7,0V23.3 l-4.7,4.6c-0.4,0.3-0.9,0.5-1.3,0.5c-0.5,0-1-0.2-1.3-0.6c-11.1-11.6-24-14.9-38.1-9.8C26.9,22,19.8,30.2,16.7,42.2z M49.4,87.7 c-9.7,0-18.7-4-26.9-12l-5,4.8c-0.4,0.3-1.3,1.1-2.4,1.1l0,0c-0.9,0-2.4-0.6-2.4-2.8V57.1c0-1.6,1.1-2.9,2.8-3.2c0.1,0,0.3,0,0.4,0 h21.5c0.1,0,0.1,0,0.2,0c0.5,0.1,2.1,0.3,2.6,1.8c0.2,0.6,0.4,1.7-0.8,2.9l-5.3,5.4c4.8,5.2,10.6,7.6,17.2,7.1 c9.1-0.8,15.2-5.4,18.6-14.2c0,0,0-0.1,0.1-0.1c0.9-2.1,2.7-2.8,3.9-2.8l9.3,0c0.4,0,2.1,0.1,3.1,1.5c0.4,0.6,0.9,1.6,0.5,3 c-3.4,13.4-11.3,22.4-23.6,26.9C58.6,86.9,53.9,87.7,49.4,87.7z M22.6,71.3C22.6,71.3,22.6,71.3,22.6,71.3c0.5,0,1,0.2,1.3,0.6 c11.1,11.6,24,14.9,38.1,9.8c11-4,18.2-12.1,21.3-24.2c0,0,0,0,0,0l-9.2,0c0,0-0.3,0.1-0.5,0.6c0,0,0,0,0,0 c-4,10-11.3,15.5-21.7,16.4c-8.4,0.7-15.7-2.6-21.5-9.7c-0.6-0.7-0.5-1.8,0.1-2.5l4.9-4.9l-18.7,0v18.9l4.7-4.6 C21.7,71.5,22.1,71.3,22.6,71.3z"></path></svg>
|
|
</div>
|
|
<script>
|
|
function audio_end(event){
|
|
p = event.target.parentElement;
|
|
if (!event.target.loop){
|
|
p.children[1].innerHTML='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 90 90" enable-background="new 0 0 90 90" xml:space="preserve"><path d="M45,6.421c21.273,0,38.579,17.306,38.579,38.579S66.273,83.578,45,83.578c-21.273,0-38.579-17.306-38.579-38.579 S23.727,6.421,45,6.421 M45,0C20.148,0,0,20.146,0,44.999s20.148,44.999,45,44.999c24.852,0,45-20.146,45-44.999S69.852,0,45,0L45,0 z M65.5,44.999l-31.5-18v36L65.5,44.999z"></path></svg>';
|
|
}
|
|
}
|
|
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;
|
|
if (audio.loop){
|
|
event.target.children[0].classList.add("spin");
|
|
}
|
|
else{
|
|
event.target.children[0].classList.remove("spin");
|
|
}
|
|
}
|
|
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 = el.parentElement.children[0];
|
|
speed = el.parentElement.children[3].value;
|
|
audio.playbackRate = speed;
|
|
if (audio.paused) {
|
|
audio.play();
|
|
el.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 80 80" enable-background="new 0 0 80 80" xml:space="preserve"><g><path d="M39.75,5.5C20.834,5.5,5.5,20.834,5.5,39.75C5.5,58.666,20.834,74,39.75,74C58.666,74,74,58.666,74,39.75 C74,20.834,58.666,5.5,39.75,5.5z M39.75,70C23.043,70,9.5,56.457,9.5,39.75C9.5,23.043,23.043,9.5,39.75,9.5 C56.457,9.5,70,23.043,70,39.75C70,56.457,56.457,70,39.75,70z"></path><path d="M37.125,52.375c0,2.348-1.903,4.25-4.25,4.25l0,0c-2.347,0-4.25-1.902-4.25-4.25V28.75c0-2.347,1.903-4.25,4.25-4.25l0,0 c2.347,0,4.25,1.903,4.25,4.25V52.375z"></path><path d="M51.125,52.375c0,2.348-1.902,4.25-4.25,4.25l0,0c-2.348,0-4.25-1.902-4.25-4.25V28.75c0-2.347,1.902-4.25,4.25-4.25l0,0 c2.348,0,4.25,1.903,4.25,4.25V52.375z"></path></g></svg>';
|
|
}
|
|
else {
|
|
audio.pause();
|
|
el.innerHTML = '<svg class="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 90 90" enable-background="new 0 0 90 90" xml:space="preserve"><path d="M45,6.421c21.273,0,38.579,17.306,38.579,38.579S66.273,83.578,45,83.578c-21.273,0-38.579-17.306-38.579-38.579 S23.727,6.421,45,6.421 M45,0C20.148,0,0,20.146,0,44.999s20.148,44.999,45,44.999c24.852,0,45-20.146,45-44.999S69.852,0,45,0L45,0 z M65.5,44.999l-31.5-18v36L65.5,44.999z"></path></svg>';
|
|
}
|
|
}
|
|
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> |