Bottom Sticky Music Player Source Code in JavaScript and CSS

In this tutorial, I am going to show you how to use the cspd-player.css and cspd-player.js from one of our GitHub project Bottom Sticky Music Player.

At first, you have to download the project from GitHub. from the project, you only need the cspd-player.css and cspd-player.js from the project to create your own Bottom sticky music player. The player is customizable using CSS code.

Also,

3D Photo/Image Gallery (on space) Using HTML5 CSS JS

After you include the CSS and JavaScript file, you have to write the HTML code that is given below:

<audio id="cs_audio" controls>
  <source src="path-to-music.mp3" type="audio/mpeg">
</audio>


<div style="text-align: center;">

<div id="cs_audioplayer">

     <span style="position: relative;left: 0;float: left;font-size: 0.87em;"><span id="cs_audio_current_time">0:0</span></span>

     <span id="cs_play_pause_btn" style="position: relative;">
         <i class="far fa-play-circle" id="cs_audio_play"></i>
         <i class="far fa-pause-circle" id="cs_audio_pause"></i>
     </span>

     <span id="cs_audio_sound" style="position: relative;right: 5px;float: right;margin-left: 15px;top: -2px;">
         <i style="vertical-align: middle;font-size: 1.14em;" class="fas fa-volume-down"></i>
         <div class="cs_volBar" style="height: 6px; width: 65px;background-color: #ccc;display: inline-block;cursor: pointer;">
           <div class="cs_volume" style="height: 6px;width: 28px;background-color: red;position: absolute;"></div>
         </div>

     </span>
     <span id="cs_audio_duration" style="position: relative;right: 0;float: right;padding-left: 10px;font-size: 0.87em;"></span>

     <div class="cs_audio_bar">
         <div class="cs_audio_bar_now"></div>
         <div class="cs_audio_bar_loaded"></div>
     </div>

</div>
</div>

The default HTML5 music player is hidden by using the CSS display property set to none in the cspd-player.css file. If you run the code on your browser, you will able to see the music player.

You have to put your own audio file in the audio source of audio tag in the HTML code. You can see that I have added “path-to-music.mp3” in the audio tag as source music file. Just replace it with your own and you can see your own music playing in the player.

Also, read:

• Change HTML5 audio player src file in JavaScript
• HTML5 Video/Audio player Volume Control With Key in JavaScript

The bottom sticky music player will have the default color combination. Well, you can change the background and font color by adding your own CSS code with the help of inspect element on the browser. Below are some of the CSS code to change some specific color of the player:

The code below will change the background and font color including the icon color:

#cs_audioplayer {
      background-color: #f5a2a2;
      color: #000;
  }

You can also change the color of the audio progress bar. there are three types of progress bar available in the HTML5 Bottom Sticky Music Player. The progress bar container, the music loaded bar and the current play time progress.

Below is the code that can change the color of the audio progress bar, the loaded bar, and current play bar:

.cs_audio_bar {
	background-color: #000;
}
.cs_audio_bar_loaded {
  background-color: #777;
}
.cs_audio_bar_now {
  background-color: green;
}

So you can see that this music player is customizable with CSS code.

Change the music on click

Another amazing feature of this project is that you can list your music on the page. Clicking on the music will play it in the bottom sticky music player.

For example, see the HTML code below:

<li><a href="javascript:void(0);" onclick="cspd_change_music('assets/music1.mp3');">Play music1</a></li>
<li><a href="javascript:void(0);" onclick="cspd_change_music('assets/music2.mp3');">Play music2</a></li>

There is already a method cspd_change_music() is in the cspd-player.js JavaScript file. All you need is just passing the music path.

Also, if you find any issue in this player, please let me know. Your opinion can help me improving this project.