Music Player using Vanilla Javascript

The core purpose of this article is to explain the working of Vanilla JS, for creating a music player.

(Note: The static files will be locally stored.)

As I’ll only be explaining the JS part, you can copy-paste the HTML and CSS parts.

index.html

Below is the styling of the music player; the album cover rotates and the title of the music pops up when the music plays.

style.css

This is how it should look right now.

Initially, I’ll load the music-container div using the ID and the play, pause, and next buttons.

Next, I’ll fetch all the other elements that I’ll be manipulating for the music player.

I’ll create a list of song names (that is also their corresponding cover image name, all in the same format) and an index that selects the current playing song(by default set to 0, i.e first song overflow).

I’m creating a loadSong function that will change the title, audio source, and cover image source corresponding to the song. I’ve invoked the same function using the songIndex.

Now, I’ll create a playSong function that will add ‘play’ in the classList of MusicContainer and replace the play icon with the pause icon.

This function is similar to playSong but it will do the exact opposite. So it will remove ‘play’ from the classList of MusicContainer and replace the pause icon with the play icon.

When the play/pause button is clicked, the song should be played/paused, so I added eventListener to the button that checks the current state and invokes the pause/play song function accordingly.

At this point, the selected music can be played and paused.

Now I’ll make the previous and next buttons functional.

Here, I’m checking if the songIndex is greater than 0, then it will decrease the index to go to the previous song. If the index is equal to or less than 0, it will loop back to the end of the list.

Similarly, I’ll check if the songIndex has reached its maximum value (i.e list length — 1) or not, accordingly, it’ll either increment the index value or reset it to 0 to loop again.

But right now the buttons won’t work, because the most important thing is left out!

One last thing remaining is the progress bar in the title section of the audio.

This will update the progress bar when the song is playing simultaneously.

Let’s also make the progress bar responsive.

That’s it! The music player using CSS animation, and pure Vanilla JavaScript with modern ES6 practices is ready.

Thanks for reading throughout. Happy Coding!

Related posts:

I recently moved to a new city and I was being introduced to someone at a dinner party. Our mutual friend let us know that we both went to the same college and immediately the conversation started…

When I first started learning about Exploratory Data Analysis, I decided to try it out on a dataset I was working with. So I went ahead and plotted a few graphs and charts to get a better…