Link to article: fragment:enayy-s-author-page.
audio-player
audio
[[div_ class="audio-player"]] [[html]] <style> :root { --black: #000000; --blue: #121419; /*primary*/ --yellow: #dba14d; /*highlight*/ --red: #833832; /* sec prim */ --white: #f1f1f1; --yellowish: #ebe9d1; } * { padding: 0; margin: 0; } .audio { background-color: var(--red); box-shadow: 0.5rem 0.3rem var(--yellow), -0.5rem -0.3rem var(--yellowish); width: 100%; height: 100%; display: flex; align-items: center; color: var(--white); font-family: "monospace", monospace; padding: 0 0.2rem; margin: 1rem; min-height: 2rem; width: 80%; } #play-pause { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' class='size-6'%3E%3Cpath fill-rule='evenodd' d='M4.5 5.653c0-1.427 1.529-2.33 2.779-1.643l11.54 6.347c1.295.712 1.295 2.573 0 3.286L7.28 19.99c-1.25.687-2.779-.217-2.779-1.643V5.653Z' clip-rule='evenodd' /%3E%3C/svg%3E%0A"); height: 2rem; aspect-ratio: 1; border: 0; background: none; cursor: pointer; mask-image: var(--icon); mask-size: contain; mask-position: center; mask-repeat: no-repeat; background-color: var(--white); } #play-pause.pause { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' class='size-6'%3E%3Cpath fill-rule='evenodd' d='M6.75 5.25a.75.75 0 0 1 .75-.75H9a.75.75 0 0 1 .75.75v13.5a.75.75 0 0 1-.75.75H7.5a.75.75 0 0 1-.75-.75V5.25Zm7.5 0A.75.75 0 0 1 15 4.5h1.5a.75.75 0 0 1 .75.75v13.5a.75.75 0 0 1-.75.75H15a.75.75 0 0 1-.75-.75V5.25Z' clip-rule='evenodd' /%3E%3C/svg%3E%0A"); } #progress-container { flex-grow: 1; margin: 0 0.4rem; display: flex; align-items: center; justify-content:start; flex-wrap: wrap; background-color: var(--blue); height: 0.5rem; } #progress-bar { height: 100%; background-color: var(--white); width: 0; } body { display: flex; justify-content: center; } .audio:has(audio[src*="{$src"]) { filter: grayscale(1); cursor: not-allowed!important; pointer-events: none; user-select: none; } </style> <script> document.addEventListener('DOMContentLoaded', () => { const audio = document.getElementById("audio-file"); const pauseplay = document.getElementById("play-pause"); const progbar = document.getElementById("progress-bar"); const played = document.getElementById("played"); const total = document.getElementById("total"); pauseplay.addEventListener('click', () => { if(pauseplay.classList == "") { pauseplay.classList.add("pause"); audio.play(); } else { pauseplay.classList.remove("pause"); audio.pause(); } }); audio.addEventListener('loadedmetadata', () => { total.innerHTML = `${Math.floor(audio.duration / 60)}:${String(Math.floor(audio.duration % 60)).padStart(2, '0')}`; }); audio.addEventListener("timeupdate", () => { if (audio.duration) { var playedPercentage = (audio.currentTime / audio.duration) * 100; progbar.style.width = `${playedPercentage}%`; played.innerHTML = `${Math.floor(audio.currentTime / 60)}:${String(Math.floor(audio.currentTime % 60)).padStart(2, '0')}`; } }); }); </script> <div class="audio"> <audio id="audio-file" src="{$src}"></audio> <button id="play-pause"></button> <div id="progress-container"> <div id="progress-bar"></div> </div> <div id="time"> <span id="played">0:00</span> | <span id="total">0:00</span> </div> </div> [[/html]] [[/div]]