Corporate Training

How to Create a Music Player with HTML, CSS, and JavaScript

Published on June 27, 2024

Hello everyone, and welcome back to our channel! Today, we’re going to walk you through creating a simple yet stylish music player using HTML, CSS, and JavaScript. By the end of this tutorial, you’ll have a sleek player that you can customise to match your website’s design. So, let’s dive in!

Let’s start by examining the HTML structure of our music player.

At the top, we have our standard HTML structure, with the <html>, <head>, and <body> tags. We’ve linked our external CSS file, style.css, and two Font Awesome libraries for our icons. We also have a title for our page and a favicon for our browser tab.

Inside the <body> tag, we have a <div> element with the class player, which serves as the container for our entire music player.

Within the player container, we have another <div> with the class details. This section will display information about the currently playing track, such as the track name and artist.

Next, we have two slider containers. The first one is for the seek bar, which allows users to navigate through the track. The second one controls the volume of the player.

Below the sliders, we have a section for control buttons. These buttons let users play, pause, skip tracks, and more. We’ve also included icons from Font Awesome to enhance the visual appeal.

<div id=”wave”>: This line starts a div element with the id attribute set to “wave”. The id attribute provides a unique identifier for this div element, which can be used to target it with CSS or JavaScript. 

<span class=”stroke”></span>: This line creates a span element with the class attribute set to “stroke”. span is an inline element used to group inline-elements in a document. Here, it’s likely used to represent a graphical stroke or line. 

<span class=”stroke”></span>: Similar to the previous line, this creates another span element with the same class “stroke“. This suggests that there might be multiple strokes forming part of a visual representation, possibly an animation. 

<span class=”stroke”></span>: Another span element with the class “stroke“. This repetition of span elements with the same class suggests a pattern or repetition in the visual representation, possibly indicating multiple strokes forming a wave-like pattern. 

<span class=”stroke”></span>: Yet another span element with the class “stroke”. This pattern continues, implying that each span element likely represents an individual stroke in the animation. 

<span class=”stroke”></span>: Another span element with the class “stroke”. 

</div>: This closes the div element started on line 1. It signifies the end of the section defined by the div element with the id “wave”. 

</div>: This closes another div element, which was likely opened elsewhere in the HTML code but not shown in the provided snippet. The closing tag seems unnecessary here unless there’s more code preceding it that we don’t have visibility into. 

CSS

Now that we’ve covered the HTML structure of our music player, let’s move on to the CSS part to design it.

Alright, let’s dive into the CSS code that gives our music player its style and appearance.

Starting with the body selector, we set the font family to Arial, Helvetica, sans-serif for consistent text rendering across different platforms. We’ve also applied a gradient background using the linear-gradient property.

In the .player class, we’ve set the height to 95% of the viewport height and used flexbox to center its contents both horizontally and vertically. The .wrapper class provides a border, padding, border-radius, and box-shadow to create a neat container for our player.

Moving on to the .details class, it arranges the track details vertically in the center. The .track-art class creates a circular container for the track art with a subtle shadow effect. We’ve also styled the track name and artist for better readability.

The .buttons class aligns the control buttons horizontally with a bit of spacing. Each control button has its own class with hover effects to enhance user interaction. These buttons will play, pause, skip, and repeat tracks in our player.

The .slider_container class centers the seek and volume sliders. We’ve styled these sliders to match the overall design, along with displaying the current time and total duration of the track. Icons for adjusting volume are also provided for user convenience.

Lastly, we have some animation effects to add a touch of dynamism to our player

The .rotate class creates a continuous rotation effect for certain elements, while the .loader class centers and animates a loading indicator. The .stroke class is part of the loading animation, defined by the @keyframes animate rule.

And there you have it! With these CSS styles, our music player looks sleek and modern. Feel free to tweak the styles to match your design preferences.

JavaScript

Now that we’ve styled our music player with CSS, let’s move on to the JavaScript part to give it functionality.

Alright, let’s dive into the JavaScript code that powers our music player.

First, we have an array called music_list that contains information about our tracks, including the track name, artist, image, and file path.

We’re using jQuery to ensure our code executes after the document is fully loaded.

The loadTrack() function loads the selected track, resets the player’s state with the reset() function, and generates a random background color with random_bg_color().

These functions handle playing and pausing tracks, toggling random playback, and repeating tracks. The playpauseTrack() function alternates between playing and pausing the current track.

The nextTrack() and prevTrack() functions move to the next or previous track respectively. seekTo() and setVolume() adjust the seek bar and volume slider, while setUpdate() continuously updates the player’s current time and duration.

Finally, we have event listeners attached to various elements to trigger actions such as playing/pausing tracks, changing tracks, and adjusting volume and seek position.

Our Latest Blog

Become a Selenium Automation Expert Ace the LSET Tester Exam & Unlock New Opportunities
March 16, 2025By

Become a Selenium Automation Expert: Ace the LSET Tester Exam & Unlock New Opportunities!

Automation testing has become a key skill in today’s software industry. With businesses striving for...
Read More
Boost Your Career with the LSET Selenium Tester Exam Validate Your Automation Skills
March 15, 2025By

Boost Your Career with the LSET Selenium Tester Exam

Automation testing is everywhere these days. If you’re working in software testing, you’ve probably come...
Read More
March 6, 2025By

Key Takeaways from the International AI and Machine Learning Workshop with Dr. Eric Hossein Fontes

The International AI and Machine Learning Workshop, held on March 5, 2025, brought together AI...
Read More

Follow Us