<div class="audio-player">
  <div class="player-controls">
    <button id="playBtn" class="play-btn" aria-label="Play">
      <svg class="icon-play" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
      <svg class="icon-pause" viewBox="0 0 24 24" width="24" height="24" fill="currentColor" style="display:none;"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
    </button>
    <div class="track-info">
      <span class="track-title">Creative Minds</span>
      <span class="track-artist">Benjamin Tissot</span>
    </div>
    <div class="progress-container">
      <div class="progress-bar" id="progressBar"></div>
    </div>
  </div>
  <audio id="audio" src="https://www.bensound.com/bensound-music/bensound-creativeminds.mp3"></audio>
</div>

.audio-player {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: #1f2937;
  color: white;
  padding: 15px 20px;
  border-radius: 50px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
.player-controls {
  display: flex;
  align-items: center;
  gap: 15px;
}
.play-btn {
  background: #3b82f6;
  border: none;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s;
}
.play-btn:hover {
  transform: scale(1.1);
}
.track-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.track-title {
  font-weight: 600;
  font-size: 0.9rem;
}
.track-artist {
  font-size: 0.75rem;
  color: #9ca3af;
}
.progress-container {
  width: 100px;
  height: 6px;
  background: #374151;
  border-radius: 10px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  background: #10b981;
  width: 0%;
  transition: width 0.1s linear;
}

const audio = document.getElementById("audio");
const playBtn = document.getElementById("playBtn");
const iconPlay = document.querySelector(".icon-play");
const iconPause = document.querySelector(".icon-pause");
const progressBar = document.getElementById("progressBar");

playBtn.addEventListener("click", () => {
  if (audio.paused) {
    audio.play();
    iconPlay.style.display = "none";
    iconPause.style.display = "block";
  } else {
    audio.pause();
    iconPlay.style.display = "block";
    iconPause.style.display = "none";
  }
});

audio.addEventListener("timeupdate", () => {
  const progress = (audio.currentTime / audio.duration) * 100;
  progressBar.style.width = `${progress}%`;
});

Back to Snippets

Custom Audio Player JS

We built this custom audio player to replace the boring default browser version. It uses simple JavaScript to control the play and pause functions, yet it looks modern and clean on your music website.

550

#javascript

#css

#audio

#player

#music

#media

#ui

Run /HTML *CSS ()JS Output Console0 Live Updates Focus

.audio-player {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: #1f2937;
  color: white;
  padding: 15px 20px;
  border-radius: 50px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
.player-controls {
  display: flex;
  align-items: center;
  gap: 15px;
}
.play-btn {
  background: #3b82f6;
  border: none;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s;
}
.play-btn:hover {
  transform: scale(1.1);
}
.track-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.track-title {
  font-weight: 600;
  font-size: 0.9rem;
}
.track-artist {
  font-size: 0.75rem;
  color: #9ca3af;
}
.progress-container {
  width: 100px;
  height: 6px;
  background: #374151;
  border-radius: 10px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  background: #10b981;
  width: 0%;
  transition: width 0.1s linear;
}