Mini Music Player

index.html

<div class="outer-container">
  <img src="https://i.ibb.co/7RhfRBZ/Fine-Line-Harry-Styles.jpg" alt="Harry Styles' Fine Line album cover" id="background" />
  <audio src="https://res.cloudinary.com/cbanlawi/video/upload/v1614140796/HarryStyles-WatermelonSugar_f5471p.mp3" id="track"></audio>
</div>

<div class="player-container">
  <img src="https://i.ibb.co/7RhfRBZ/Fine-Line-Harry-Styles.jpg" alt="Harry Styles' Fine Line album cover" id="thumbnail" />

  <div class="box">
    <div class="play-pause">
      <i class="far fa-play-circle fa-3x" id="play"></i>
      <i class="far fa-pause-circle fa-3x" id="pause"></i>
    </div>
    <div class="track-info">
      <div id="track-artist">Harry Styles</div>
      <div id="track-title">Watermelon Sugar</div>
    </div>
    <div class="next-prev">
      <i class="far fa-arrow-alt-circle-left fa-2x" id="prev-track"></i>
      <i class="far fa-arrow-alt-circle-right fa-2x" id="next-track"></i>
    </div>
    <div class="progress-bar">
      <input type="range" id="progressBar" min="0" max="" value="0" />
    </div>
    <div class="track-time">
      <div id="currentTime"></div>
      <div id="durationTime"></div>
    </div>
  </div>
</div>

mini-music-player.markdown

Mini Music Player

A Pen by Christine Banlawi on CodePen.

License.

script.js

const track = document.getElementById("track");
const thumbnail = document.getElementById("thumbnail");
const background = document.getElementById("background");
const trackArtist = document.getElementById("track-artist");
const trackTitle = document.getElementById("track-title");
const progressBar = document.getElementById("progressBar");
const currentTime = document.getElementById("currentTime");
const durationTime = document.getElementById("durationTime");

let play = document.getElementById("play");
let pause = document.getElementById("pause");
let next = document.getElementById("next-track");
let prev = document.getElementById("prev-track");
trackIndex = 0;

tracks = [
  "https://res.cloudinary.com/cbanlawi/video/upload/v1614140796/HarryStyles-WatermelonSugar_f5471p.mp3",
  "https://res.cloudinary.com/cbanlawi/video/upload/v1614144520/Justin_Bieber-Yummy_vercib.mp3",

  "https://res.cloudinary.com/cbanlawi/video/upload/v1614186705/Loud_Luxury_ft._Brando_-_Body_fm7cdr.mp3"
];
thumbnails = [
  "https://i.ibb.co/7RhfRBZ/Fine-Line-Harry-Styles.jpg",
  "https://i.ibb.co/dkDC9CP/Justin-Bieber-Song-Cover-Art.jpg",
  "https://i.ibb.co/371t9Md/Loud-Luxury-Song-Cover-Art.jpg"
];
trackArtists = ["Harry Styles", "Justin Bieber", "Loud Luxury ft. Brando"];
trackTitles = ["Watermelon Sugar", "Yummy", "Body"];

let playing = true;

function pausePlay() {
  if (playing) {
    play.style.display = "none";
    pause.style.display = "block";

    thumbnail.style.transform = "scale(1.25)";

    track.play();
    playing = false;
  } else {
    pause.style.display = "none";
    play.style.display = "block";

    thumbnail.style.transform = "scale(1)";

    track.pause();
    playing = true;
  }
}

play.addEventListener("click", pausePlay);
pause.addEventListener("click", pausePlay);

track.addEventListener("ended", nextTrack);

function nextTrack() {
  trackIndex++;
  if (trackIndex > tracks.length - 1) {
    trackIndex = 0;
  }

  track.src = tracks[trackIndex];
  thumbnail.src = thumbnails[trackIndex];
  background.src = thumbnails[trackIndex];

  trackArtist.textContent = trackArtists[trackIndex];
  trackTitle.textContent = trackTitles[trackIndex];

  playing = true;
  pausePlay();
}

next.addEventListener("click", nextTrack);

function prevTrack() {
  trackIndex--;
  if (trackIndex < 0) {
    trackIndex = tracks.length - 1;
  }

  track.src = tracks[trackIndex];
  thumbnail.src = thumbnails[trackIndex];
  background.src = thumbnails[trackIndex];

  trackArtist.textContent = trackArtists[trackIndex];
  trackTitle.textContent = trackTitles[trackIndex];

  playing = true;
  pausePlay();
}

prev.addEventListener("click", prevTrack);

function progressValue() {
  progressBar.max = track.duration;
  progressBar.value = track.currentTime;

  currentTime.textContent = formatTime(track.currentTime);
  durationTime.textContent = formatTime(track.duration);
}

setInterval(progressValue, 500);

function formatTime(sec) {
  let minutes = Math.floor(sec / 60);
  let seconds = Math.floor(sec - minutes * 60);
  if (seconds < 10) {
    seconds = `0${seconds}`;
  }
  return `${minutes}:${seconds}`;
}

function changeProgressBar() {
  track.currentTime = progressBar.value;
}

progressBar.addEventListener("click", changeProgressBar);

style.css

#background {
  object-fit: cover;
  height: 100vh;
  width: 100vw;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  filter: blur(7px);
  z-index: -1;
}

.outer-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.player-container {
  display: flex;
  flex-direction: column;
  position: absolute;
  height: 400px;
  width: 325px;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  box-shadow: 0 0 30px #f94c57;
}

#thumbnail {
  position: absolute;
  object-fit: fill;
  height: 100%;
  width: 100%;
  top: -10%;
  transition: 1s;
  z-index: 3;
}

.box {
  position: absolute;
  height: 45%;
  width: 100%;
  background: linear-gradient(90deg, rgb(145, 145, 145), rgb(220, 220, 220));
  z-index: 4;
  bottom: -10%;
  display: grid;
  grid-template-colums: 35px 255px 35px;
  grid-template-rows: 85px 25px 25px;
  grid-template-areas:
    "one two two three"
    "four four four four"
    "five five five five";
  column-gap: 10px;
}

.play-pause {
  grid-area: one;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.fa-pause-circle {
  filter: invert(1);
  cursor: pointer;
  display: none;
}

#play,
#prev-track,
#next-track {
  filter: invert(1);
  cursor: pointer;
}

.track-info {
  grid-area: two;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-left: 5%;
  /* border: 1px solid red; */
}

#track-artist {
  color: #f94c57;
  font-family: "Lato", sans-serif;
  font-weight: bold;
  font-size: 1.125rem;
  text-shadow: 0 0 15px white;
}

#track-title {
  color: white;
  font-family: "Lato", sans-serif;
  font-size: 1rem;
}

.next-prev {
  grid-area: three;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  /* border: 1px solid red; */
}

.progress-bar {
  grid-area: four;
  display: flex;
  justify-content: center;
  align-items: center;
  /* border: 1px solid red; */
}

#progressBar {
  appearance: none;
  height: 5px;
  background: white;
  width: 57.5%;
  outline: none;
  border-radius: 30px;
}

#progressBar::-webkit-slider-thumb {
  appearance: none;
  height: 11px;
  width: 11px;
  outline: none;
  background: #f94c57;
  border-radius: 30px;
  cursor: pointer;
}

.track-time {
  grid-area: five;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  /* border: 1px solid red; */
}

#currentTime {
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  color: white;
}

#durationTime {
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  color: #f94c57;
  text-shadow: 0 0 15px white;
}