shortcodes/audio.html

<script>
    function audio_end(event){
        p = event.target.parentElement;
        if (!event.target.loop){
            p.children[1].innerHTML=icons['play'];
        }
    }
    function setup_display(event){
        el = event.target.children[0];
        el.style.display="flex";
        console.log("Display audio")
    }
    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[3].style.display="block";
        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.children[0].children[0].setAttribute("href","#pause");
        }
        else {
            audio.pause();
            el.children[0].children[0].setAttribute("href","#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>
<style>
    .audio-player {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content:center;
        width: 100%;
    }
    .audio-player>*{
        margin:2px;
        margin-right:5px;
        margin-left:5px;
    }
    .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);
    flex-wrap: nowrap;
}
.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;
    height:2.25rem;
    z-index: -1;
    background-color: transparent;
    pointer-events: none;
}
.icon path,
    .icon rect {
        stroke: var(--theme-accent);
        fill: var(--theme-accent);
    }

.icon svg circle {
    stroke: var(--theme-accent);
    fill: transparent;
    stroke-width: 6;
}
@keyframes spin-icon {
    0%{rotate:0;}
    100%{rotate:360deg;}  
}
.spin{
    animation:spin-icon 3s linear infinite;
}
</style>
<div class="media-container" onload="setup_display(event)">
    <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>
                <use href="#play"></use>
            </svg>
        </div>
        <input class="media-seek" type="range" onchange="update_audio_time(event)" value="0">
        <select onchange="update_audio_speed(event)" style="display:none;">
            <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>
                <use href="#loop"></use>
            </svg>
        </div>
    </div>
    <noscript>
        <style>
            .audio-player {
                display: none;
            }
        </style>
        <audio controls preload="false" style="width:100%;min-width:40vw;">
            <source src='{{.Site.BaseURL}}{{.Get "src" }}'>
        </audio>
    </noscript>
</div>