→ Arturo
→ Audio player with bootstrap

Audio player with bootstrap

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

Tags: Widget

Author Arturo

411

v.5.3

Fork Fullscreen

<div class="container">
    <div class="audio-player">
        
        <div class="track-info">
            <img src="https://images.unsplash.com/photo-1616089883149-a928483f3953?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxfHxMb3N0JTIwaW4lMjB0aGUlMjBFY2hvZXMlMjAlMjhmZWF0LiUyMFN5bXBob255JTI5fGVufDB8MHx8fDE3MzQ4OTQwNjd8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="Album Cover" class="track-image">
            <div>
                <div class="marquee">
                    <span class="h5 mb-1">Lost in the Echoes (feat. Symphony)</span>
                </div>
                <p class="text-muted mb-0">Electronic Dreams • Album Name</p>
            </div>
        </div>

<div class="progress-bar">
            <div class="progress"></div>
            <div class="progress-handle"></div>
        </div>

<div class="d-flex justify-content-between time-info">
            <span>2:45</span>
            <span>4:30</span>
        </div>

<div class="controls">
            <button class="control-button">
                <i class="fas fa-random fa-lg"></i>
            </button>
            <button class="control-button">
                <i class="fas fa-step-backward fa-lg"></i>
            </button>
            <button class="play-button">
                <i class="fas fa-play fa-lg"></i>
            </button>
            <button class="control-button">
                <i class="fas fa-step-forward fa-lg"></i>
            </button>
            <div class="volume-control">
                <button class="control-button">
                    <i class="fas fa-volume-up"></i>
                </button>
                <div class="volume-slider">
                    <div class="volume-level"></div>
                </div>
            </div>
        </div>
    </div>
</div>

playButton.addEventListener('click', () => {
        isPlaying = !isPlaying;
        playButton.innerHTML = isPlaying ? 
            '<i class="fas fa-pause fa-lg"></i>' : 
            '<i class="fas fa-play fa-lg"></i>';
    });
</script>

More Examples

Countdown timer
Countdown timer with js

Author:
Moana silva

6 months ago

3.6k

v.5.3
Marquee Animation
On hover stop effect

Author:
Anonymous

6 months ago

2.6k

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

Author:
Prajwal Hallale

6 months ago

1.9k

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

4 months ago

1.3k

v.5.3
Calender

Author:
Anonymous

6 months ago

353

v.4.6
Bootstrap video player
Video player with buttons

Author:
Kemaya m

6 months ago

1.3k

v.5.3
Music player with bootstrap 5
Animated music player design

Author:
Mateo Rojas

1 month ago

264

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

Author:
Arturo

1 month ago

349

v.5.3
Bootstrap with VideoJS player
Video player with buttons

Author:
Anonymous

2 months ago

369

v.5.3
Timer with bootstrap

Author:
Anonymous

1 month ago

241

v.5.3
Interactive Kanban Task Board

Author:
Anonymous

4 months ago

2.5k

v.5.3
Bootstrap with VideoJS player
Video player with buttons

Author:
Anonymous

2 months ago

313

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent