How to Add a Music Player with Playlist in Blogger Using HTML, CSS & JavaScript

Adding a music player with a playlist to your Blogger site can make your blog more interactive and engaging. Whether you want to feature background music, showcase your favorite tracks, or share your own recordings, a custom HTML, CSS, and JavaScript music player is the perfect solution.

This guide will show you how to integrate a music player with a playlist into your Blogger theme step by step.

Step 1: Access the Blogger Theme Editor

To start, you need to access the Blogger theme’s HTML editor.

Go to Blogger Dashboard > Theme.
Click the Arrow (⏷) next to Customize > Edit HTML.

This will allow you to modify your theme’s code and add the necessary elements for the music player.

Step 2: Add the HTML Structure

Find the <body> section and insert the following code where you want the music player to appear:

<div class="music-player">
    <audio id="audio-player" controls></audio>
    <ul id="playlist">
        <li data-src="MUSIC_URL_1">Song 1</li>
        <li data-src="MUSIC_URL_2">Song 2</li>
        <li data-src="MUSIC_URL_3">Song 3</li>
    </ul>
</div>

🔹 Replace MUSIC_URL_1, MUSIC_URL_2, and MUSIC_URL_3 with actual links to your audio files (MP3, WAV, or OGG formats recommended).

This code creates an audio player and a playlist where users can click a song title to play it.

Step 3: Style the Music Player with CSS

Now, customize the appearance of the music player by adding this CSS code inside Edit Theme > Customize > Advanced > Add CSS:

.music-player {
    width: 100%;
    max-width: 400px;
    margin: auto;
    background: #222;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    color: white;
}

#playlist {
    list-style: none;
    padding: 0;
}

#playlist li {
    padding: 10px;
    cursor: pointer;
    background: #333;
    margin: 5px 0;
    border-radius: 5px;
}

#playlist li:hover {
    background: #555;
}

This CSS ensures the music player looks clean and modern, with a dark theme that complements most blog designs.

Step 4: Add JavaScript for Music Player Functionality

To make the playlist functional, insert this JavaScript code before the </body> tag in your Blogger theme:

<script>
document.addEventListener("DOMContentLoaded", function () {
    const audioPlayer = document.getElementById("audio-player");
    const playlistItems = document.querySelectorAll("#playlist li");

    playlistItems.forEach(item => {
        item.addEventListener("click", function () {
            audioPlayer.src = this.getAttribute("data-src");
            audioPlayer.play();
        });
    });
});
</script>

This script allows users to click a song from the playlist, which will automatically play in the audio player.

Step 5: Save and Preview Your Music Player

Click Save Theme after adding all the changes.
Open your Blogger site and test the music player with the playlist.
If the player doesn’t work, try clearing your browser cache and refreshing the page.

Customization Tips

Modify the CSS styles to change the background, font color, and button styles to match your blog’s design.
Add more songs by inserting extra <li> elements in the playlist.
Use different audio file formats (MP3, OGG, WAV) for better browser compatibility.
Add autoplay, shuffle, or loop functions by modifying the JavaScript code.

Final Thoughts

A custom music player with a playlist is a great way to enhance your Blogger site and keep visitors engaged. By following this tutorial, you now have a fully functional and stylish audio player integrated into your blog. Experiment with different styles and settings to make it unique!

If you have any questions or need further customization, feel free to ask in the comments!