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

Faraz

By Faraz -

Learn how to create a music player from scratch using HTML, CSS, and JavaScript in this beginner's guide. Step-by-step instructions and code snippets included.

Join us on Telegram
use html css and javascript to build your own music player.jpg
Read Alsoa beginners guide to creating a custom bootstrap carousel.jpgA Beginner's Guide to Creating a Custom Bootstrap Carousel

Table of Contents

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

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.

Source Code

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.

Read AlsoCreate Your Own Dictionary with HTML, CSS, and JavaScript.jpgCreate Your Own Dictionary with HTML, CSS, and JavaScript

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.

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.

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

html {
  min-height: 100%;
}

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

.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;
}
.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);
}
.music-player .info {
  width: 100%;
  height: 100px;
  background: #222;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  position: relative;
}
.music-player .info .jp-playlist li {
  display: none;
}
.music-player .info .jp-playlist li a {
  font-size: 30px;
  font-weight: 300;
  text-decoration: none;
  color: #fff;
  color: rgba(225, 225, 225, 0.4);
}
.music-player .info .jp-playlist li a span {
  font-size: 14px;
  display: block;
  margin-top: 10px;
}
.music-player .info .jp-playlist li.jp-playlist-current {
  display: block;
}
.music-player .info .jp-playlist li .jp-free-media, .music-player .info .jp-playlist li .jp-playlist-item-remove {
  display: none;
}
.music-player .info .left, .music-player .info .right {
  width: 25px;
  position: absolute;
  top: 30px;
  left: 30px;
}
.music-player .info .right {
  left: auto;
  right: 30px;
}
.music-player .info [class^=icon-] {
  margin: 0 0 10px;
}
.music-player .info .center {
  padding: 20px 0 0;
}
.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;
  border-radius: 0;
}
.music-player .progress .ui-slider-handle, .music-player .volume-level .ui-slider-handle {
  position: absolute;
  top: -8px;
  width: 8px;
  height: 22px;
  background: url("https://i.imgur.com/tsqwz1N.png") no-repeat center;
  border: none;
  outline: none;
  margin: 0 0 0 -3px;
  cursor: move;
}
.music-player .controls {
  text-align: center;
  width: 100%;
  height: 190px;
  background: #982e4b;
  background: rgba(152, 46, 75, 0.6);
}
.music-player .controls .current {
  font-size: 48px;
  color: #fff;
  color: rgba(225, 225, 225, 0.4);
  padding: 15px 0 20px;
}
.music-player .controls .play-controls a {
  display: inline-block;
  width: 35px;
  height: 40px;
  margin: 0 30px;
}
.music-player .controls .volume-level {
  position: relative;
  bottom: auto;
  width: 200px;
  height: 2px;
  margin: 30px auto 0;
  background: rgba(225, 225, 225, 0.3);
}
.music-player .controls .volume-level .ui-slider-range {
  height: 2px;
}
.music-player .controls .volume-level .ui-slider-handle {
  top: -8px;
  margin-left: -9px;
  width: 22px;
  height: 22px;
  background-image: url("https://i.imgur.com/V5i67V2.png");
}
.music-player .controls .volume-level .icon-volume-up, .music-player .controls .volume-level .icon-volume-down {
  position: absolute;
  right: -34px;
  top: -8px;
  width: 22px;
}
.music-player .controls .volume-level .icon-volume-down {
  right: auto;
  left: -27px;
}

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

.icon-shuffle {
  background-image: url("https://i.imgur.com/AQAxRxS.png");
}
.icon-heart {
  background-image: url("https://i.imgur.com/E09T8tf.png");
}
.icon-repeat {
  background-image: url("https://i.imgur.com/338F8MX.png");
}
.icon-share {
  background-image: url("https://i.imgur.com/PGIC6ME.png");
}
.icon-previous {
  background-image: url("https://i.imgur.com/LIqj0nr.png");
}
.icon-play {
  background-image: url("https://i.imgur.com/xlBv5aR.png");
}
.icon-pause {
  background-image: url("https://i.imgur.com/lIhwduj.png");
}
.icon-next {
  background-image: url("https://i.imgur.com/Mb6Nzj5.png");
}
.icon-volume-up {
  background-image: url("https://i.imgur.com/qqdoddi.png");
}
.icon-volume-down {
  background-image: url("https://i.imgur.com/3iirf2f.png");
}

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.

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

Note: Include all the libraries in the HTML file.

Designed by: Vladimyr Kondriianenko and coded by Mustafa ismail

$(document).ready(function(){

  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"
  }];
  
  var cssSelector = {
    jPlayer: "#jquery_jplayer",
    cssSelectorAncestor: ".music-player"
  };
  
  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);
    }
  };
  
  var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);
  var PlayerData = $(cssSelector.jPlayer).data("jPlayer");
  
  
  // Create the 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);
		}
  });
  
  // Create the 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) {
				// Move the play-head to the value and factor in the seek percent.
				$(cssSelector.jPlayer).jPlayer("playHead", ui.value * (100 / sp));
			} else {
				// Create a timeout to reset this slider to zero.
				setTimeout(function() {
					 $( ".progress" ).slider("value", 0);
				}, 0);
			}
		}
	});
});

Final Output:

use html css and javascript to build your own music player.gif
Read AlsoCreate Windows 11 Clone HTML, CSS, JavaScript Tutorial.jpgCreate Windows 11 Clone: HTML, CSS, JavaScript Tutorial

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. Happy coding!

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: html, css, javascript, music player, audio, web development, how to build a music player with html; css and javascript, creating an audio player with html; css and javascript, customizing a music player with html; css and javascript, adding features to a music player with html; css and javascript, responsive music player design with html; css and javascript
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post