Music Player

Working music player
With start top buttons and progress bar

This bootstrap css example is contributed by Prajwal Hallale, on 19-Jul-2024. Component is made with bootstrap css v.5.3. It is responsive.

Tags: Widget

Author Prajwal Hallale

4.8k

v.5.3

Fork Fullscreen

<div class="container mt-5">
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Now Playing</h5>
            <p class="card-text">Artist - Song Title</p>
            <div class="progress mb-3">
                <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0"
                    aria-valuemax="100"></div>
            </div>
            <div class="d-flex justify-content-between">
                <span id="currentTime">0:00</span>
                <span id="duration">0:00</span>
            </div>
            <div class="mt-3 text-center">
                <button id="prevBtn" class="btn btn-secondary"><i class="fas fa-step-backward"></i></button>
                <button id="playPauseBtn" class="btn btn-primary"><i class="fas fa-play"></i></button>
                <button id="nextBtn" class="btn btn-secondary"><i class="fas fa-step-forward"></i></button>
            </div>
        </div>
    </div>
</div>

let audio = new Audio('https://file-examples.com/storage/fe9f6f893066954d9aac3a2/2017/11/file_example_MP3_700KB.mp3');
let isPlaying = false;

function updateProgress() {
    const progress = (audio.currentTime / audio.duration) * 100;
    progressBar.style.width = `${progress}%`;
    progressBar.setAttribute('aria-valuenow', progress);
    
    currentTimeSpan.textContent = formatTime(audio.currentTime);
    durationSpan.textContent = formatTime(audio.duration);
}

playPauseBtn.addEventListener('click', togglePlayPause);
audio.addEventListener('timeupdate', updateProgress);
</script>

More Examples

Marquee Animation
On hover stop effect

Author:
Anonymous

9 months ago

6.3k

v.5.3
Calender

Author:
Anonymous

9 months ago

655

v.4.6
Bootstrap with VideoJS player
Video player with buttons

Author:
Anonymous

5 months ago

796

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

Author:
Arturo

4 months ago

1.6k

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

Author:
Mateo Rojas

4 months ago

1.1k

v.5.3
Typewriter Effect

Author:
Anonymous

9 months ago

1.1k

v.4.6
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

8 months ago

4.3k

v.5.3
Bootstrap video player
Video player with buttons

Author:
Kemaya m

9 months ago

3k

v.5.3
Countdown timer
Countdown timer with js

Author:
Moana silva

9 months ago

7.1k

v.5.3
Timer with bootstrap

Author:
Anonymous

4 months ago

1.2k

v.5.3
Bootstrap with VideoJS player
Video player with buttons

Author:
Anonymous

5 months ago

862

v.5.3
Audio player with bootstrap

Author:
Arturo

4 months ago

1.6k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent