Audio player

HTML5 audio player that has consistent UI across all browsers and devices.

Silicon component

Example

0:00 0:00
<!-- 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>
Top