Music player

Bootstrap 5 Music player component

Responsive Music player built with Bootstrap 5. Easy to adjust and customize example of audio player with basic audio controls.

Basic example

Use the following example of a music player with an image with a ripple effect, author name, song title, play/stop audio controls and slider.

Card image cap
Dj Flam

Urban Bachata remix

Edit in sandbox 
<!-- Content -->
<div class="container d-flex justify-content-center my-4 mb-5">

  <div id="mobile-box">

    <!-- Card -->
    <div class="card">
      <div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
        <img class="card-img-top" src="https://mdbootstrap.com/wp-content/uploads/2019/02/flam.jpg"
          alt="Card image cap">
        <a href="#!">
          <div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
        </a>
      </div>
      <div class="card-body text-center">

        <h5 class="h5 font-weight-bold"><a href="#" target="_blank">Dj Flam</a></h5>
        <p class="mb-0">Urban Bachata remix</p>

        <audio id="music" preload="true">
          <source src="#">
        </audio>
        <div id="audioplayer">
          <i id="pButton" class="fas fa-play"></i>
          <div id="timeline">
            <div id="playhead"></div>
          </div>
        </div>

      </div>
    </div>
    <!-- Card -->
  </div>
</div>
<!-- Content -->
html,
body,
.view {
  height: 100%;
}

#mobile-box {
  width: 360px;
}

.card {
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

.card .view {
  -webkit-border-top-left-radius: 10px;
  border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  border-top-right-radius: 10px;
}

.card h5 a {
  color: #0d47a1;
}

.card h5 a:hover {
  color: #072f6b;
}

#pButton {
  float: left;
}

#timeline {
  width: 90%;
  height: 2px;
  margin-top: 20px;
  margin-left: 10px;
  float: left;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  background: rgba(0, 0, 0, 0.3);
}

#pButton {
  margin-top: 12px;
  cursor: pointer;
}

#playhead {
  width: 8px;
  height: 8px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  margin-top: -3px;
  background: black;
  cursor: pointer;
}