→ Mateo Rojas
→ Music player with bootstrap 5

Music player with bootstrap 5

Animated music player design

This bootstrap css example is contributed by Mateo Rojas, on 21-Dec-2024. Component is made with bootstrap css v.5.3. It is responsive.

Tags: Widget

Author Mateo Rojas

479

v.5.3

Fork Fullscreen

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">

<div class="bg-light">
  <div class="container py-5">
    <div class="audio-player">
      <div class="album-art">
        <img src="https://images.unsplash.com/photo-1564419431636-fe02f0eff7aa?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MXwxfHNlYXJjaHwxfHxzdW1tZXJ8ZW58MHwwfHx8MTczNDc5NjI0Mnww&ixlib=rb-4.0.3&q=80&w=1080" alt="Album Art" style="width: 100%; height: 100%; object-fit: cover;">
      </div>

<div class="visualizer">
        <div class="bar" style="animation-delay: -0.4s"></div>
        <div class="bar" style="animation-delay: -0.2s"></div>
        <div class="bar" style="animation-delay: -0.6s"></div>
        <div class="bar" style="animation-delay: -0.1s"></div>
        <div class="bar" style="animation-delay: -0.3s"></div>
        <div class="bar" style="animation-delay: -0.5s"></div>
        <div class="bar" style="animation-delay: -0.2s"></div>
        <div class="bar" style="animation-delay: -0.4s"></div>
      </div>

<div class="track-info">
        <div class="track-title">Summer Vibes</div>
        <div class="track-artist">John Smith</div>
      </div>

<div class="progress-container">
        <div class="progress-bar">
          <div class="progress"></div>
        </div>
        <div class="time-info">
          <span>1:23</span>
          <span>3:45</span>
        </div>
      </div>

<div class="controls">
        <button class="control-btn">
          <i class="fas fa-backward"></i>
        </button>
        <button class="control-btn play-pause">
          <i class="fas fa-play"></i>
        </button>
        <button class="control-btn">
          <i class="fas fa-forward"></i>
        </button>
      </div>

<div class="volume-container">
        <i class="fas fa-volume-up"></i>
        <div class="volume-slider">
          <div class="volume-level"></div>
        </div>
      </div>
    </div>
  </div>
</div>

More Examples

bootstrap quiz template (Interactive)
Interactive MCQ Quiz show results at the end

Author:
Arturo

2 months ago

545

v.5.3
Marquee Animation
On hover stop effect

Author:
Anonymous

7 months ago

3.6k

v.5.3
Bootstrap with VideoJS player
Video player with buttons

Author:
Anonymous

3 months ago

389

v.5.3
Typewriter Effect

Author:
Anonymous

7 months ago

621

v.4.6
Calender

Author:
Anonymous

7 months ago

416

v.4.6
Music Player
Working music player With start top buttons and progress bar

Author:
Prajwal Hallale

7 months ago

2.6k

v.5.3
Timer with bootstrap

Author:
Anonymous

1 month ago

415

v.5.3
Bootstrap video player
Video player with buttons

Author:
Kemaya m

7 months ago

1.6k

v.5.3
Interactive Kanban Task Board

Author:
Anonymous

5 months ago

3k

v.5.3
Bootstrap with VideoJS player
Video player with buttons

Author:
Anonymous

3 months ago

499

v.5.3
Interactive Quiz Application
1. Dynamic Question Loading: Questions are loaded one at a time from a predefined set. 2. Timer: Each question has a 30-second time limit. Interactive Options: Users can select their answer, with visual feedback for correct and incorrect choices. 3. Progress Bar: Shows the user's progress through the quiz. 4. Results Summary: Displays the final score with a congratulatory or encouraging message. 5. Responsive Design: The quiz adapts to different screen sizes.

Author:
Ross Wille

5 months ago

1.8k

v.5.3
Countdown timer
Countdown timer with js

Author:
Moana silva

7 months ago

4.4k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent

BootstrapExamples From the makers of tailwindflex.com

BootstrapExamples is a free library offering a diverse range of Bootstrap CSS components. Developed by the community, it's open for anyone to use.

Contacts

Email:

[email protected]

Links

Search

Resources

Free Tailwind CSS Components Free CSS Components

© 2025 BootstrapExamples. All Rights Reserved.

v1.3