<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>
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.
523