ZTM - Music PlayerUse object-fit to set how the content of a

Github Page: kevinsunny2008.github.io/music-playe…

Use filter to implement hover reactions by adjusting brightness CSS

.fas {
  font-size: 30px;
  color: rgb(129, 129, 129);
  margin-right: 30px;
  cursor: pointer;
  user-select: none;
}

.fas:hover {
  filter: brightness(80%);
}

Implement progress bar with nested DIVs, adjust progress by changing the width of child DIV

HTML

<div class="progress-container" id="progress-container">
  <div class="progress" id="progress"></div>
  <div class="duration-wrapper">
      <span id="current-time">0:00</span>
      <span id="duration">2:06</span>
  </div>
</div>

CSS

progress-container {
  background: #fff;
  border-radius: 5px;
  cursor: pointer;
  margin: 40px 20px;
  height: 4px;
  width: 90%;
}

.progress {
  background: #242323;
  border-radius: 5px;
  height: 100%;
  width: 0%;
  transition: width 0.1s linear;
}

.duration-wrapper {
  position: relative;
  top: -25px;
  display: flex;
  justify-content: space-between;
}

const {duration, currentTime} = e.srcElement;
const progressPercent = currentTime / duration * 100;
progress.style.width = `${progressPercent}%`;

Use object-fit to set how the content of a replaced element, such as an or , should be resized to fit its container.

Value range: fill, contain, cover, none, scale-down

.img-container img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 5px 30px 5px rgba(0, 0, 0, 0.5);
}

Make use of timeupdate and ended events of audio element to update progress bar and play next song

music.addEventListener('timeupdate', updateProgressBar);
music.addEventListener('ended',nextSong);

TextContent VS InnerText TextContent has better performance because its value is not parsed as HTML. TextContent doesn't trigger a repaint when the new value is same as previous value, this can be checked by turning on the paint flashing in the Chrome developer tool / Performance / Rendering