<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>