→ 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

1.4k

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

Calender

Author:
Anonymous

9 months ago

591

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

Author:
Arturo

4 months ago

1.4k

v.5.3
Bootstrap video player
Video player with buttons

Author:
Kemaya m

9 months ago

2.6k

v.5.3
Countdown timer
Countdown timer with js

Author:
Moana silva

9 months ago

6.6k

v.5.3
Typewriter Effect

Author:
Anonymous

9 months ago

965

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

Author:
Prajwal Hallale

9 months ago

4.3k

v.5.3
Interactive Kanban Task Board

Author:
Anonymous

7 months ago

3.8k

v.5.3
Bootstrap with VideoJS player
Video player with buttons

Author:
Anonymous

5 months ago

695

v.5.3
Timer with bootstrap

Author:
Anonymous

3 months ago

984

v.5.3
Bootstrap with VideoJS player
Video player with buttons

Author:
Anonymous

5 months ago

768

v.5.3
Marquee Animation
On hover stop effect

Author:
Anonymous

9 months ago

5.7k

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

Author:
Mateo Rojas

4 months ago

927

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent