Use HTML, CSS and JavaScript to Build Your Own Music Player

Table of Contents

1. Project Introduction
2. HTML Code
3. CSS Code
4. JavaScript Code
5. Conclusion
6. Preview

In this article, we'll look at how to build a music player with HTML, CSS, and JavaScript. You will learn how to create your own music player that can play audio files and have a control bar at the bottom that you can use to change controls like volume and skip forward/backward.

Let's start making an amazing music player using HTML, CSS and JavaScript step by step.

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file. This file will contain the main content of our player, including the music player itself and the controls.

The HTML document has several components including links to external CSS and JavaScript files as well as a div class named "music-player" that contains the main components of the music player.

The "info" div contains the controls for the music player including the shuffle, heart, repeat, and share icons. The "jp-playlist" div contains an unordered list that will be populated with the track names. The "progress" div will display the progress of the current song.

The "controls" div includes buttons to control the current song including the previous, play, pause, and next buttons. The "volume-level" div includes buttons to control the volume level.

The JavaScript files referenced in the HTML document are necessary for the music player to function properly. These files include jQuery, jQuery UI, jPlayer, and jPlayer Playlist.

Overall, this HTML document provides the code necessary to create a functional music player that can be customized with additional styling and functionality.

After creating the files just paste the following below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.

This is the basic structure of our music player using HTML, and now we can move on to styling it using CSS.

Step 2 (CSS Code):

Next, we'll add some basic CSS styling to our HTML file. we'll add some CSS rules to style our music player. We'll set the width and height of our music player container, as well as the font size and color of our text elements. We'll also add some margin around our music player content so it looks more spacious.

Here's a detailed breakdown of each section:

Global Styles

*, *:before, *:after {
  box-sizing: border-box;
}

• Ensures that padding and borders are included in the element's total width and height.

html {
  min-height: 100%;
}

• Sets the minimum height of the HTML document to 100% of the viewport height.

body {
  background: #eee url("https://i.imgur.com/82fLDu4.jpg") no-repeat center;
  background-size: cover;
  font-family: "Open Sans", sans-serif;
}

• Sets a light grey background color with an image centered and covers the entire background.
• Applies the "Open Sans" font family.

Music Player Container

.music-player {
  position: relative;
  width: 350px;
  height: 290px;
  margin: 150px auto;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.8);
  border-radius: 10px;
  background: #222;
  overflow: hidden;
  z-index: 0;
}

• Creates a container for the music player.
• Centers the container with a margin, giving it a width and height, shadow, and rounded corners.
• Applies a dark background and hides overflow content.

Music Player Background Image

.music-player img {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: -1;
  display: block;
  width: 100% !important;
  height: 100% !important;
  filter: blur(2px);
}

• Positions the image absolutely to cover the entire player container.
• Sets a blur filter for the image.

Info Section

.music-player .info {
  width: 100%;
  height: 100px;
  background: #222;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  position: relative;
}

• Styles the info section of the player.
• Centers the text and gives it a semi-transparent dark background.

.music-player .info .jp-playlist li {
  display: none;
}

• Hides playlist items by default.

.music-player .info .jp-playlist li.jp-playlist-current {
  display: block;
}

• Displays the current playlist item.

.music-player .info .left, .music-player .info .right {
  width: 25px;
  position: absolute;
  top: 30px;
  left: 30px;
}
.music-player .info .right {
  left: auto;
  right: 30px;
}

• Positions left and right controls within the info section.

Progress and Volume Controls

.music-player .progress, .music-player .volume-level {
  width: 100%;
  height: 5px;
  display: block;
  background: #000;
  position: absolute;
  bottom: 0px;
  cursor: pointer;
  border: none;
}
.music-player .progress .ui-slider-range, .music-player .volume-level .ui-slider-range {
  display: block;
  background: #ed553b;
  height: 5px;
}

• Styles the progress bar and volume control.
• Sets a dark background with a red slider range.

Control Buttons

.music-player .controls {
  text-align: center;
  width: 100%;
  height: 190px;
  background: #982e4b;
  background: rgba(152, 46, 75, 0.6);
}

• Centers control buttons and give them a semi-transparent dark red background.

Icons

[class^=icon-] {
  width: 18px;
  height: 18px;
  background: url("https://i.imgur.com/E09T8tf.png") no-repeat center;
  display: block;
}

• Sets the default style for icons, using a background image.

.icon-shuffle {
  background-image: url("https://i.imgur.com/AQAxRxS.png");
}
/* More icon-specific styles follow */

• Specifies background images for different icons.

Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

Step 3 (JavaScript Code):

Finally, we'll add some basic JavaScript code to initialize our player and handle user input. We'll call our player method when a user clicks on the play button, and we'll listen for input from the user in the input element.

Here’s a detailed breakdown of each part of the JavaScript code:

Document Ready Function

$(document).ready(function(){

• Ensures that the code runs only after the document is fully loaded.

Playlist Array

var playlist = [{
    title:"Hidden",
    artist:"Miaow",
    mp3:"http://www.jplayer.org/audio/mp3/Miaow-02-Hidden.mp3",
    oga:"http://www.jplayer.org/audio/ogg/Miaow-02-Hidden.ogg",
    poster: "https://i.imgur.com/sCbrzQa.png"
  },{
    title:"Cro Magnon Man",
    artist:"The Stark Palace",
    mp3:"http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
    oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg",
    poster: "https://i.imgur.com/lXvsuBu.png"
  },{
    title:"Bubble",
    m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
    oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg",
    poster: "https://i.imgur.com/klJKSVZ.jpg"
}];

• Defines a playlist with multiple tracks, each having a title, artist, different audio formats (mp3, oga, m4a), and a poster image.

CSS Selectors

var cssSelector = {
  jPlayer: "#jquery_jplayer",
  cssSelectorAncestor: ".music-player"
};

• Specifies the jPlayer element and its container.

Player Options

var options = {
  swfPath: "https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.6.4/jquery.jplayer/Jplayer.swf",
  supplied: "ogv, m4v, oga, mp3",
  volumechange: function(event) {
    $( ".volume-level" ).slider("value", event.jPlayer.options.volume);
  },
  timeupdate: function(event) {
    $( ".progress" ).slider("value", event.jPlayer.status.currentPercentAbsolute);
  }
};

• Configures jPlayer options, including the path to the SWF file for Flash fallback, supported audio formats, and event handlers for volume and time updates.

Initialize jPlayer Playlist

var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);
var PlayerData = $(cssSelector.jPlayer).data("jPlayer");

• Initializes a jPlayer playlist with the specified selectors, playlist, and options.
• Stores the jPlayer data for later use.

Volume Slider Control

$( ".volume-level" ).slider({
   animate: "fast",
   max: 1,
   range: "min",
   step: 0.01,
   value : $.jPlayer.prototype.options.volume,
   slide: function(event, ui) {
     $(cssSelector.jPlayer).jPlayer("option", "muted", false);
     $(cssSelector.jPlayer).jPlayer("option", "volume", ui.value);
   }
});

• Creates a volume slider control using jQuery UI.
• Sets up properties like animation speed, max value, range, and step.
• Defines a slide event to update the jPlayer volume.

Progress Slider Control

$( ".progress" ).slider({
   animate: "fast",
   max: 100,
   range: "min",
   step: 0.1,
   value : 0,
   slide: function(event, ui) {
     var sp = PlayerData.status.seekPercent;
     if(sp > 0) {
       $(cssSelector.jPlayer).jPlayer("playHead", ui.value * (100 / sp));
     } else {
       setTimeout(function() {
         $( ".progress" ).slider("value", 0);
       }, 0);
     }
   }
});

• Creates a progress slider control using jQuery UI.
• Sets properties like animation speed, max value, range, and step.
• Defines a slide event to update the playhead position in jPlayer based on the slider value and seek percent.

Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file.

Conclusion:

In this tutorial, we have shown you how to build a music player using HTML, CSS, and JavaScript. By following the step-by-step guide, you should now have a fully functional music player that you can customize to your liking.

You can further develop this project by adding more features such as a search bar, lyrics display, or social media sharing. You can also make it more responsive by implementing media queries and optimizing it for mobile and desktop.

We hope that this tutorial has helped you gain a better understanding of web development and given you the confidence to create your own projects. Don't hesitate to experiment and try new things, as this is the best way to learn and grow as a developer.

Note: Include all the libraries in the HTML file.

Designed by: Vladimyr Kondriianenko and coded by Mustafa Ismail