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;
        }