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