Audio player
HTML5 audio player that has consistent UI across all browsers and devices.
Example
<!-- Audio player markup -->
<div class="card p-lg-4 p-md-2 mb-4 mb-lg-5">
<div class="audio-player card-body p-2 p-sm-4">
<!-- Audio tag with the link to the audio file -->
<audio src="assets/audio/sample.wav" preload="auto"></audio>
<!-- Custom player markup -->
<button type="button" class="ap-play-button btn btn-icon btn-primary shadow-primary" aria-label="Play/pause"></button>
<span class="ap-current-time flex-shr fw-medium mx-3 mx-lg-4">0:00</span>
<input type="range" class="ap-seek-slider" max="100" value="0">
<span class="ap-duration flex-shr fw-medium mx-3 mx-lg-4">0:00</span>
<div class="dropup">
<button type="button" class="ap-volume-button btn btn-icon btn-secondary" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false" aria-label="Volume">
<i class="bx bx-volume-full"></i>
</button>
<div class="dropdown-menu dropdown-menu-dark my-1">
<input type="range" class="ap-volume-slider" max="100" value="100">
</div>
</div>
<a href="assets/audio/sample.wav" download="audio-sample" class="btn btn-icon btn-secondary ms-2" aria-label="Download">
<i class="bx bx-download"></i>
</a>
</div>
</div>