<div class="app">
  <div class="video">
    <video loop>
      <source src="https://harryheman.github.io/meditationApp/src/video/rain.mp4" type="video/mp4">
    </video>
  </div>
  <div class="time-select">
    <button data-time="120">2 Minutes</button>
    <button data-time="300">5 Minutes</button>
    <button data-time="600">10 Minutes</button>
  </div>
  <div class="player">
    <audio class="song">
      <source src="https://harryheman.github.io/meditationApp/src/audio/rain.mp3">
    </audio>
    <img src="https://harryheman.github.io/meditationApp/src/svg/play.svg" alt="play" class="play">
    <svg class="track-outline" width="453" height="453" viewBox="0 0 453 453" fill="none" xmlns="http://www.w3.org/2000/svg">
      <circle cx="226.5" cy="226.5" r="216.5" stroke="white" stroke-width="20" />
    </svg>
    <svg class="moving-outline" width="453" height="453" viewBox="0 0 453 453" fill="none" xmlns="http://www.w3.org/2000/svg">
      <circle cx="226.5" cy="226.5" r="216.5" stroke="#018EBA" stroke-width="20" />
    </svg>
    <h3 class="time-display">0:00</h3>
  </div>
  <div class="sound">
    <button data-sound="https://harryheman.github.io/meditationApp/src/audio/rain.mp3" data-video="https://harryheman.github.io/meditationApp/src/video/rain.mp4"><img src="https://harryheman.github.io/meditationApp/src/svg/rain.svg" alt="rain"></button>
    <button data-sound="https://harryheman.github.io/meditationApp/src/audio//beach.mp3" data-video="https://harryheman.github.io/meditationApp/src/video/beach.mp4"><img src="https://harryheman.github.io/meditationApp/src/svg/beach.svg" alt="beach"></button>
  </div>
</div>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.app {
  height: 100vh;
  display: flex;
  justify-self: space-evenly;
  align-items: center;
}

.time-select,
.sound,
.player {
  height: 80%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.player {
  position: relative;
}

.player svg {
  position: absolute;
  height: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  pointer-events: none;
}

.time-display {
  position: absolute;
  bottom: 10%;
  color: white;
  font-size: 50px;
}

video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
}

.time-select button,
.sound button {
  color: white;
  width: 30%;
  height: 10%;
  background: none;
  border: 2px solid white;
  cursor: pointer;
  border-radius: 5px;
  font-size: 20px;
  transition: all 0.5s ease;
}

.time-select button:hover {
  color: black;
  background: white;
}

.sound button {
  border: none;
  height: 120px;
  width: 120px;
  border-radius: 50%;
  padding: 30px;
}

.sound button:first-child {
  background: #4972a1;
}

.sound button:last-child {
  background: #a14f49;
}

.sound button img {
  height: 100%;
}
const app = () => {
  const song = document.querySelector(".song");
  const play = document.querySelector(".play");
  const outline = document.querySelector(".moving-outline circle");
  const video = document.querySelector("video");

  const sounds = document.querySelectorAll(".sound button");
  const timeDisplay = document.querySelector(".time-display");
  const timeSelect = document.querySelectorAll(".time-select button");

  const outlineLength = outline.getTotalLength();

  let duration = 600;

  outline.style.strokeDasharray = outlineLength;
  outline.style.strokeDashoffset = outlineLength;

  sounds.forEach((sound) => {
    sound.addEventListener("click", function () {
      song.src = this.getAttribute("data-sound");
      video.src = this.getAttribute("data-video");
      checkPlaying(song);
    });
  });

  play.addEventListener("click", () => {
    checkPlaying(song);
  });

  timeSelect.forEach((option) => {
    option.addEventListener("click", function () {
      duration = this.getAttribute("data-time");
      timeDisplay.textContent = `${Math.floor(duration / 60)}:${Math.floor(
        Math.floor(duration % 60)
      )}`;
    });
  });

  const checkPlaying = (song) => {
    if (song.paused) {
      song.play();
      video.play();
      play.src = "https://harryheman.github.io/meditationApp/src/svg/pause.svg";
    } else {
      song.pause();
      video.pause();
      play.src = "https://harryheman.github.io/meditationApp/src/svg/play.svg";
    }
  };

  song.ontimeupdate = () => {
    let currentTime = song.currentTime;
    let elapsed = duration - currentTime;
    let seconds = Math.floor(elapsed % 60);
    let minutes = Math.floor(elapsed / 60);

    let progress = outlineLength - (currentTime / duration) * outlineLength;
    outline.style.strokeDashoffset = progress;

    timeDisplay.textContent = `${minutes}:${seconds}`;

    if (currentTime >= duration) {
      song.pause();
      song.load();
      play.src = "https://harryheman.github.io/meditationApp/src/svg/play.svg";
    }
  };
};

app();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.