fragment:enayy-s-author-page

Link to article: fragment:enayy-s-author-page.

Module Styles

• (none)

Inline Styles

• (none)

Includes

• (none)

CSS Classes

• audio-player

• audio

Page Source

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