<div class="player">
  <div class="player__poster">
    <img src="https://raw.githubusercontent.com/sheikh005/30Days30Projects/master/Day%2026%20-%20Custom%20Music%20Player/img/0.jpg" />
  </div>
  <div class="player__info">
    <p class="title">
      HAPPYROCK
    </p>
  </div>
  <div class="player__progress">
    <div class="player__progress__inner"></div>
  </div>
  <div class="player__controls">
    <button id="previous"><i class="fas fa-backward"></i></button>
    <button id="play"><i class="fas fa-play"></i></button>
    <button id="next"><i class="fas fa-forward"></i></button>
  </div>
</div>

<p class="info">
  *Can also use Spacebar, and arrow keys to control player. <br />
  Music from Bensound.com
</p>

<audio src="audio/happyrock.mp3" preload="metadata"></audio>
<audio src="audio/jazzyfrenchy.mp3" preload="metadata"></audio>

@import url("https://fonts.googleapis.com/css2?family=Baloo+Thambi+2:wght@500&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Baloo Thambi 2", cursive;
}

body {
  background-color: #1abc9c;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.player {
  max-width: 300px;
  border-radius: 30px;
  background: linear-gradient(45deg, #1cc9a7, #17a98c);
  box-shadow: 20px 20px 60px #16a085, -20px -20px 60px #1ed8b3;

  &__poster {
    img {
      max-height: 300px;
      width: 100%;
      border-radius: 30px 30px 0 0;
      filter: contrast(60%);
    }
  }

  &__info {
    margin: 8px;
    font-size: 18px;
    color: #11836c;
  }

  &__progress {
    width: 95%;
    height: 6px;
    border-radius: 2px;
    background-color: #16a085;
    box-shadow: 20px 20px 60px #16a085, -20px -20px 60px #1ed8b3;
    margin: 4px auto;
    cursor: pointer;

    &__inner {
      background-color: #fff;
      width: 0%;
      height: 100%;
      border-radius: 2px;
      position: relative;

      &:after {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #fff;
        position: absolute;
        top: -2px;
        right: -5px;
      }
    }
  }

  &__controls {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin: 1rem;

    button {
      border: none;
      font-size: 28px;
      background-color: #1abc9c;
      color: #16a085;
      cursor: pointer;
      box-shadow: 20px 20px 60px #16a085, -20px -20px 60px #1ed8b3;
      transition: 0.3s all;
      outline: none;

      &:active {
        transform: scale(0.9);
        outline: none;
      }
    }
  }
}
p.info {
  color: #11836c;
  text-align: center;
  margin-top: 4rem;
  font-size: 14px;
}

::selection {
  background-color: #11836c;
  color: #1ed8b3;
}

const url =
  "https://raw.githubusercontent.com/sheikh005/30Days30Projects/master/Day%2026%20-%20Custom%20Music%20Player";

const audio = document.getElementsByTagName("audio")[0],
  playBtn = document.getElementById("play"),
  progress = document.querySelector(".player__progress"),
  progressBar = document.querySelector(".player__progress__inner"),
  next = document.getElementById("next"),
  prev = document.getElementById("previous"),
  title = document.querySelector(".title"),
  poster = document.querySelector(".player__poster img");

// audio.play();
const audioList = ["happyrock", "jazzyfrenchy"];
var audioIndex = 0;

audio.src = `${url}/audio/${audioList[audioIndex]}.mp3`;
console.log(audioList[audioIndex]);

playBtn.addEventListener("click", () => {
  if (audio.paused) {
    audio.play();
  } else {
    audio.pause();
  }
});

audio.addEventListener("play", () => {
  playBtn.innerHTML = `<i class="fas fa-pause"></i>`;
});

audio.addEventListener("pause", () => {
  playBtn.innerHTML = `<i class="fas fa-play"></i>`;
});

// Update progress bar
audio.addEventListener("timeupdate", () => {
  const percent = (audio.currentTime / audio.duration) * 100;

  progressBar.style.width = `${percent}%`;
});

// Update progress on click
progress.addEventListener("click", (e) => {
  audio.currentTime = (e.offsetX / progress.clientWidth) * audio.duration;
});

// Forward 10s
document.addEventListener("keydown", (e) => {
  if (e.keyCode == 32) {
    // play|pause
    if (audio.paused) {
      audio.play();
    } else {
      audio.pause();
    }
  } else if (e.keyCode == 39) {
    // forward
    audio.currentTime += 10;
  } else if (e.keyCode == 37) {
    // bakward
    audio.currentTime -= 10;
  } else if (e.keyCode == 38) {
    // volume up
    if (audio.volume < 1.0) {
      audio.volume += 0.1;
    }
  } else if (e.keyCode == 40) {
    // volume down
    if (audio.volume >= 0.0) {
      audio.volume -= 0.1;
    }
  }
});

next.addEventListener("click", () => {
  if (audioIndex == audioList.length - 1) {
    audioIndex = 0;
  } else {
    audioIndex++;
  }

  audio.src = `${url}/audio/${audioList[audioIndex]}.mp3`;

  // Change title
  title.innerHTML = `${audioList[audioIndex].toUpperCase()}`;

  // Change poster
  poster.src = `${url}/img/${audioIndex}.jpg`;

  audio.play();
});

prev.addEventListener("click", () => {
  if (audioIndex == 0) {
    audioIndex = audioList.length - 1;
  } else {
    audioIndex--;
  }
  audio.src = `${url}/audio/${audioList[audioIndex]}.mp3`;

  // Change title
  title.innerHTML = `${audioList[audioIndex]} - Bensound`;

  // Change poster
  poster.src = `${url}/img/${audioIndex}.jpg`;

  audio.play();
});

audio.addEventListener("ended", () => {
  playBtn.innerHTML = `<i class="fas fa-play"></i>`;

  setTimeout(() => {
    next.click(); // simulating 'next' button click
  }, 1000);
});