valor/layouts/shortcodes/audio.html

<style>
    .audio-player {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content:center;
        width: 100%;
    }
    .audio-player>*{
        height:fit-content;
        padding:0.25rem;
    }
    .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">
    <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  viewBox="0 0 120 120"><circle style="opacity:0.99;fill-opacity:0;stroke-width:6.4;stroke-dasharray:none;stroke-opacity:1" id="path2040" cx="60.062084" cy="62.077591" r="52.403164" /><path style="opacity:0.99;fill-opacity:1; stroke-width:4;stroke-dasharray:none;stroke-opacity:1" d="m 36.961917,29.902848 c 3.596357,-1.826163 63.333473,26.918008 63.449063,32.530093 0.1386,6.729203 -61.229407,35.615675 -63.254766,33.796117 -1.971501,-1.557746 -3.672784,-64.52183 -0.194297,-66.32621 z" id="path1060"> </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  viewBox="0 0 120 120" version="1.1"> <circle style="opacity:0.99;fill-opacity:0;stroke-width:6.4;stroke-dasharray:none;stroke-opacity:1" id="path2040" cx="60.062084" cy="62.077591" r="52.403164" /> <path style="opacity:0.99;fill-opacity:1;stroke-width:1.1;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" d="M 49.086093,104.69797 53.85938,96.982017 C -0.70319734,64.562086 46.019709,40.176232 48.130402,38.442953 c 0,0 4.487934,4.354976 5.546329,5.309403 1.84557,1.664276 5.129158,-20.199369 5.129158,-20.199369 l -22.368136,0.483004 5.548034,5.713299 c 0,0 -56.905236,37.386495 7.100306,74.94868 z" id="path4435"  /> <path style="opacity:0.99;fill-opacity:1;stroke-width:1.1;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" d="m 72.493272,21.303543 -4.773287,7.715948 c 54.562575,32.419931 7.839671,56.805785 5.728978,58.539064 0,0 -4.487934,-4.354976 -5.546329,-5.309403 -1.845568,-1.664276 -5.129158,20.199368 -5.129158,20.199368 l 22.368136,-0.483 -5.548034,-5.713302 c 0,0 56.905242,-37.386495 -7.100306,-74.948675 z" id="path4435-7"   /></svg>
        </div>
        <script src="/js/icons.js"></script>
        <script>
            function audio_end(event){
                p = event.target.parentElement;
                if (!event.target.loop){
                    p.children[1].innerHTML=icons['play'];
                }
            }
            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 = icons['pause'];
                }
                else {
                    audio.pause();
                    el.innerHTML = icons['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>