Silicon UI Kit

##### Menu

Preview Docs

### Content

Typography Icon font Code Images & figures Tables

### Components

Accordion Alerts Audio player Badges Blog components Breadcrumb Buttons Button group Cards Carousel (Slider) Collapse Dropdowns Forms Gallery (Lightbox) Image comparison slider Input group List group Modal Navbar Offcanvas Pagination Parallax Pills Placeholders Popovers Portfolio components Pricing Progress bars Social buttons Spinners Steps Tabs Team Testimonials / reviews Toasts Tooltips Video popup

### Utilities

Bootstrap Silicon

# 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"></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">
            <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">
          <i class="bx bx-download"></i>
        </a>
      </div>
    </div>

Top