→ 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

3.1k

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

1 year ago

1.1k

v.4.6
Typewriter Effect

Author:
Anonymous

1 year ago

1.7k

v.4.6
Countdown timer
Countdown timer with js

Author:
Moana silva

1 year ago

10.1k

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

Author:
Arturo

8 months ago

2.9k

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

Author:
Mateo Rojas

8 months ago

2k

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

Author:
Prajwal Hallale

1 year ago

7.4k

v.5.3
Timer with bootstrap

Author:
Anonymous

8 months ago

2.5k

v.5.3
Marquee Animation
On hover stop effect

Author:
Anonymous

1 year ago

9.5k

v.5.3
Bootstrap with VideoJS player
Video player with buttons

Author:
Anonymous

9 months ago

1.3k

v.5.3
Bootstrap video player
Video player with buttons

Author:
Kemaya m

1 year ago

5k

v.5.3
Interactive Kanban Task Board

Author:
Anonymous

1 year ago

5.7k

v.5.3
Bootstrap with VideoJS player
Video player with buttons

Author:
Anonymous

9 months ago

1.5k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent