Create a Music Player using JavaScript

As streaming is increasingly being adopted by users, online media players have become essential for consuming media on the internet. Music players allow one to enjoy music in any browser and supports a lot of the features of an offline music player.
We will be creating a music player with a clean user interface that can be used to play music in the browser. We will also implement features like seeking and volume control. HTML has several methods in the HTMLMediaElement interface that can be used to play audio files and control its playback without using any other library.
We will start by creating the HTML layout first that defines the structure of the player, make it look good by styling using CSS and then write the player logic for all the functions in JavaScript.

The HTML Layout
The HTML layout defines the element structure that would be shown on the page. The player can be divided into the following portions:

• Details Portion: This section shows the details of the current track being played. It includes the track number, track album, track name and track artist.
• Buttons Portion: This section shows the buttons that are used to control the playback of the track. It includes the play/pause button, the previous and next track buttons. They would have an onclick() method that calls a specific function defined in the JavaScript file.
• Sliders Portion: This section contains the seek slider and volume slider that can be used to control the playback and volume.

We will be using FontAwesome icons to get the icons for all the buttons used on the page. The custom CSS and JavaScript we will write later is also linked in the file.
The HTML code is as follows:

The CSS Styling
Using CSS we can style the different portions to make it more visually appealing: 

• The flex layout is used to arrange the various elements of the player and align them to the middle of the page.
• The track art image is given a fixed dimension and made rounded using the border-radius property.
• The two sliders have been modified from their default look by using the appearance property. The height and background are changed to suit the color scheme. They are also given slight transparency that smoothly transitions to the full opacity using the transition property.
• All the playback controls have their cursor property set so that it changes to a pointer whenever the mouse hovers over it.

The result of the HTML layout and CSS styling would give the following appearance:

👁 html_css_output

JavaScript logic of the player:
The logic of the player is defined in the JavaScript file. There are several functions that work together to handle all the functions of the player.
Step 1: Defining all the variables and accessing the HTML elements 
The required elements in the HTML layout that are to be dynamically changed are first selected using the querySelector() method. They are then assigned variable names so that they could be accessed and modified. Other variables that would be accessed throughout the program are also defined.

Step 2: Loading a new track from the tracklist 
All the tracks that have to be played are defined in the tracklist as objects. These objects contain properties like the name, artist, image and path to the track. Each of the tracks can then be accessed using its track index.
To load a track, a function loadTrack() is defined which handles the following things: 

• Reset all the values of the previous track
  A resetValues() function is created which handles the resetting of the duration value and the slider to their initial values before a new track starts. This prevents the jumping of the seek slider while the new track loads.
• Loading the track
  The audio element is assigned a new source using its src property. It may be given any path from the filesystem or a URL. The load() method is then used on the audio element to get the track ready.
• Updating the track art to be shown
  The track art is fetched from the array and assigned with the help of the backgroundImage property.
• Updating the track details to be shown
  The track details are fetched from the array and assigned with the help of the textContent property.
• Adding event listeners to the track
  The media element has two event listeners added to it, the first one to update the current seek position and the second one to load the next track when the current track finishes.
• Setting a random colored background
  A coloured background is generated by randomising the red, green and blue values used and setting it as a color. The effect is animated by using the transition property on the background-color.

Step 3: Configuring the player buttons 
A function playTrack() handles the playing of the currently loaded track. The play() method of the HTMLMediaElement API is used for this function. The icon of the button also changes to the pause icon. This is done by using one of the icons from the FontAwesome library and inserting it using innerHTML.
A function pauseTrack() handles the playing of the currently loaded track. The pause() method of the HTMLMediaElement API is used for this function. The icon of the button also changes back to the play icon. This is done by using one of the icons from the FontAwesome library and inserting it using innerHTML.
These two functions are invoked depending on whether the track is currently playing or not. The playpause() function handles the actual play/pause control of the track. 
A function prevTrack() handles the loading of the previous track and moving the index backward. The index is reset to the last track when the index reaches the first track. The loadTrack() method defined above is used for loading the new track.
Similarly, a function nextTrack() handles the loading of the next track and moving the index forward. The index is reset to the first track when the index reaches the last track. The loadTrack() method defined above is used for loading the new track.

Step 4: Configuring the sliders portion
We will be setting up two sliders that control the seek slider and the volume slider.

• The seek slider
  The seek slider shows the current playback position on a slider by updating it with the current time of the track. A new function is created seekUpdate() which handles the updating of the seek slider relative to the current time of the track. The seek slider position is calculated and set using the value property. 
  Now, this function has to be called every time the track progresses further. This can be done by scheduling it to be updated every second. This can be done using the setInterval() method with an interval of 1000 milliseconds. This timer is cleared every time a new track is loaded.
  This function also handles the changing of the time elapsed and the total duration of the track, which is updated every time this function fires. The minutes and the seconds are separately calculated and properly formatted to be displayed. 
  
• The volume slider
  The volume slider is used to display an set the current volume of the track. A new function is created setVolume() which handles the setting of the volume slider whenever the user changes it. 
  

Step 5: Starting the player
The first track is loaded by calling the loadTrack() function. This will load the first track from the tracklist and update all the details of the track. The user can then start playing the track using the play button. The previous and next track button would load the previous and next track respectively and start playing them.
The next track is automatically loaded when a track finishes playing. The user can seek to a position in the track using the seek slider. The volume can also be adjusted using the volume slider.

Final Demonstration
The player is now ready to be used in any browser. New tracks can be added to the tracklist to play the music of your choice.

Source Code:https://github.com/sayantanm19/js-music-player

JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.