DEV Community

loading...
Cover image for How To Make A Music Player Using HTML and CSS

How To Make A Music Player Using HTML and CSS

backlinkn profile image backlinkn Updated on ・17 min read

How to make a music player using only simple HTML and CSS programming code. This music player is completely professional and responsive. You can use it on any device. In this article, I will give you a complete guide to make this awesome and professional music player. Basically, I used HTML and CSS programming code for it and used a small amount of JavaScript code. Hope you like this music player and from here you can fully learn how I made it.

Alt Text




Some information about this music player

  • Basically, I used a simple HTML and CSS programming code to make this music player.
  • It is a professional music player with a height of 5 cm and a width of 3 cm. Which looks like a mobile. You can easily use it on a mobile, tab, laptop, computer, etc.
  • In this case, I have made the same features as in the general music player. Below are the options to turn the song on and off.

  • There are also various options to change the song, like the song and resume the song. Above is a screen where pictures related to the song can be seen.

  • Below is the name of the song and the name of the singer of the song or a place to show some description.

  • Above all, there is a three-dot menu. Clicking there will open a new page where there are many songs to choose from. There is also a search button on the side.

  • Below is a menu bar where you can like the song, play the song again, and many more options.

All in all, it is a great music player. Hope you like this music player. Below I show you how to make this music player step by step or add it to your own project or blog.

How to Make This Music Player

Below I have told you all the steps to make this music player in three steps. First of all, you have to create an HTML file. You can create separate CSS files if you want. There is no problem if you do not want to. You can add CSS code to HTML files. To do this, copy the structure below and paste it into your HTML file. In the following structure, I have shown were to add three types of code. You copy and paste the HTML, CSS, and JavaScript codes below into those places.

Add HTML Code

First of all, you add the HTML code. In this case, some amount of HTML code has been used. With the help of which the structure of this music player has been made. You copy the codes and paste them in the structure above where the add HTML code is written.

<article class="screen">
  <input type="checkbox" value="None" id="magicButton" name="check" />
  <label class="main" for="magicButton"></label>

  <div class="coverImage"></div>
  <div class="search"></div>
  <div class="bodyPlayer"></div>

  <table class="list">
    <tr class="song">
      <td class="nr">
        <h5>1<h5></td>
                        <td class="title"><h6>Heavydirtysoul<h6></td><!--                                                                                                                     /*player {background: none;text-align: center;font-family: FontAwesome;color: #fff;font-size: 26px;line-height: 26px;width: 216px;height: 35px;position: asolute;bottom: 100px;left: 48%;transform: translate(-50%, 0);z-index: 10;transition: all 0.3s ease-in;border-spacing: 0;}*/-->
                        <td class="length"><h5>3:54<h5></td>
                        <td><input type="checkbox" id="heart"/><label class="zmr" for="heart"></label></td>
                    </tr>

                    <tr class="song">
                        <td class="nr"><h5>2<h5></td>
                        <td class="title"><h6 style="color: #ff564c;">StressedOut<h6></td>
                        <td class="length"><h5>3:22<h5></td>
                        <td><input type="checkbox" id="heart1" checked /><label class="zmr" for="heart1"></label></td>
                    </tr>

                    <tr class="song">
                        <td class="nr"><h5>3<h5></td>
                        <td class="title"><h6>Ride<h6></td>
                        <td class="length"><h5>3:34<h5></td>
                        <td><input type="checkbox" id="heart2"/><label class="zmr" for="heart2"></label></td>
                    </tr>

                    <tr class="song"><!--                                                                                                                     /*player {background: none;text-align: center;font-family: FontAwesome;color: #fff;font-size: 26px;line-height: 26px;width: 216px;height: 35px;position: asolute;bottom: 100px;left: 48%;transform: translate(-50%, 0);z-index: 10;transition: all 0.3s ease-in;border-spacing: 0;}*/-->
                        <td class="nr"><h5>4<h5></td>
                        <td class="title"><h6>Fairy Local<h6></td>
                        <td class="length"><h5>3:27<h5></td>
                        <td><input type="checkbox" id="heart3" checked /><label class="zmr" for="heart3"></label></td>
                    </tr>

                    <tr class="song">
                        <td class="nr"><h5>5<h5></td>
                        <td class="title"><h6>Tear in My Heart<h6></td>
                        <td class="length"><h5>3:08<h5></td>
                        <td><input type="checkbox" id="heart4"/><label class="zmr" for="heart4"></label></td>
                    </tr>

                    <tr class="song">
                        <td class="nr"><h5>6<h5></td>
                        <td class="title"><h6>Lane Boy<h6></td>
                        <td class="length"><h5>4:13<h5></td>
                        <td><input type="checkbox" id="heart5"/><label class="zmr" for="heart5"></label></td>
                    </tr>
                    <!--                                                                                                                     /*player {background: none;text-align: center;font-family: FontAwesome;color: #fff;font-size: 26px;line-height: 26px;width: 216px;height: 35px;position: asolute;bottom: 100px;left: 48%;transform: translate(-50%, 0);z-index: 10;transition: all 0.3s ease-in;border-spacing: 0;}*/-->
                    <tr class="song">
                        <td class="nr"><h5>7<h5></td>
                        <td class="title"><h6>The Judge<h6></td>
                        <td class="length"><h5>4:57<h5></td>
                        <td><input type="checkbox" id="heart6"/><label class="zmr" for="heart6"></label></td>
                    </tr>

                    <tr class="song">
                        <td class="nr"><h5>8<h5></td>
                        <td class="title"><h6>Doubt<h6></td>
                        <td class="length"><h5>3:11<h5></td>
                        <td><input type="checkbox" id="heart7"/><label class="zmr" for="heart7"></label></td>
                    </tr>

                    <tr class="song">
                        <td class="nr"><h5>9<h5></td>
                        <td class="title"><h6>Polarize<h6></td>
                        <td class="length"><h5>3:46<h5></td>
                        <td><input type="checkbox" id="heart8"/><label class="zmr" for="heart8"></label></td>
                    </tr>
                </table>
                <!--                                                                                                                     /*player {background: none;text-align: center;font-family: FontAwesome;color: #fff;font-size: 26px;line-height: 26px;width: 216px;height: 35px;position: asolute;bottom: 100px;left: 48%;transform: translate(-50%, 0);z-index: 10;transition: all 0.3s ease-in;border-spacing: 0;}*/-->
                <div class="shadow"></div>

                <div class="bar"></div>

                <div class="info">
                    <h4>STRESSED OUT</h4>
                    <h3>twenty one pilots - Blurryface</h3>
                </div>
<audio preload="auto" id="audio" controls>
  <source src="http://www.jplayer.org/audio/mp3/Miaow-02-Hidden.mp3">
  <source src="http://www.jplayer.org/audio/mp3/Miaow-02-Hidden.ogg">
    </audio>
                <table class="player">
                    <td><input type="checkbox" id="backward"/><label class="backward" for="backward"></label></td>
                    <td><input type="checkbox" id="play" title="Play" onclick="togglePlayPause()"/><label class="play" for="play"></label></td>
                    <td><input type="checkbox" id="forward"/><label class="forward" for="forward"></label></td>
                </table>

                <table class="footer">
                    <td><input type="checkbox" id="love" checked /><label class="love" for="love"></label></td><!--                                                                                                                     /*player {background: none;text-align: center;font-family: FontAwesome;color: #fff;font-size: 26px;line-height: 26px;width: 216px;height: 35px;position: asolute;bottom: 100px;left: 48%;transform: translate(-50%, 0);z-index: 10;transition: all 0.3s ease-in;border-spacing: 0;}*/-->
                    <td><input type="checkbox" id="shuffle"/><label class="shuffle" for="shuffle"></label></td>
                    <td><input type="checkbox" id="repeat" checked /><label class="repeat" for="repeat"></label></td>
                    <td><input type="checkbox" id="options"/><label class="options" for="options"></label></td>
                </table>

                <div class="current"><h2>STRESSED OUT</h2></div>


        </article>
Enter fullscreen mode Exit fullscreen mode

Add CSS Code

The code below is basically the programming code that controls all the activities of this music player. In this case, I have used a lot of CSS code. I have made this music player based on CSS code. You can copy the following CSS codes. Then paste it in the upper structure where the ad CSS code is written. Also, if you want to create a separate CSS file and paste the code into it, you must attach your CSS file to the HTML file.

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);

body {
  background: #ff564c;
  padding: 0;
  margin: 0;
}
                                                                                                                     /*player {background: none;text-align: center;font-family: FontAwesome;color: #fff;font-size: 26px;line-height: 26px;width: 216px;height: 35px;position: asolute;bottom: 100px;left: 48%;transform: translate(-50%, 0);z-index: 10;transition: all 0.3s ease-in;border-spacing: 0;}*/
@keyframes harlem {
  0% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
  }
  20% {
    transform: scale(1.03, 1);
    -webkit-transform: scale(1.03, 1);
    -moz-transform: scale(1.03, 1);
    -o-transform: scale(1.03, 1);
    -ms-transform: scale(1.03, 1);
  }
  40% {
    transform: scale(0.97, 1);
    -webkit-transform: scale(0.97, 1);
    -moz-transform: scale(0.97, 1);
    -o-transform: scale(0.97, 1);
    -ms-transform: scale(0.97, 1);
  }                                                                                                                     /*player {background: none;text-align: center;font-family: FontAwesome;color: #fff;font-size: 26px;line-height: 26px;width: 216px;height: 35px;position: asolute;bottom: 100px;left: 48%;transform: translate(-50%, 0);z-index: 10;transition: all 0.3s ease-in;border-spacing: 0;}*/
  60% {
    transform: scale(1.01, 1);
    -webkit-transform: scale(1.01, 1);
    -moz-transform: scale(1.01, 1);
    -o-transform: scale(1.01, 1);
    -ms-transform: scale(1.01, 1);
  }
  80% {
    transform: scale(0.99, 1);
    -webkit-transform: scale(0.99, 1);
    -moz-transform: scale(0.99, 1);
    -o-transform: scale(0.99, 1);
    -ms-transform: scale(0.99, 1);
  }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
  }
}
                                                                                                                     /*player {background: none;text-align: center;font-family: FontAwesome;color: #fff;font-size: 26px;line-height: 26px;width: 216px;height: 35px;position: asolute;bottom: 100px;left: 48%;transform: translate(-50%, 0);z-index: 10;transition: all 0.3s ease-in;border-spacing: 0;}*/
h2 {
  margin: 0;
  padding: 0;
  font-size: 10px;
  line-height: 10px;
  letter-spacing: 2.5px;
  font-family: 'Open Sans';
  font-weight: 700;
  color: #fff;
}

h3 {
  margin: 0;
  padding: 0;
  font-size: 11px;
  line-height: 11px;
  font-family: 'Open Sans';                                                                                                                     /*player {background: none;text-align: center;font-family: FontAwesome;color: #fff;font-size: 26px;line-height: 26px;width: 216px;height: 35px;position: asolute;bottom: 100px;left: 48%;transform: translate(-50%, 0);z-index: 10;transition: all 0.3s ease-in;border-spacing: 0;}*/
  font-weight: 400;
  color: #777;
}

h4 {
  margin: 0 0 5px 29px;
  padding: 0;
  font-size: 14px;
  line-height: 14px;
  font-family: 'Open Sans';
  font-weight: 700;
  color: #fff;
}

h5 {
  margin: 0;
  padding: 0;
  font-size: 13px;
  line-height: 13px;                                                                                                                     /*player {background: none;text-align: center;font-family: FontAwesome;color: #fff;font-size: 26px;line-height: 26px;width: 216px;height: 35px;position: asolute;bottom: 100px;left: 48%;transform: translate(-50%, 0);z-index: 10;transition: all 0.3s ease-in;border-spacing: 0;}*/
  font-family: 'Open Sans';
  font-weight: 700;
  color: #6d6d6d;
}

h6 {
  margin: 0;
  padding: 0;
  font-size: 13px;
  line-height: 13px;
  font-family: 'Open Sans';
  font-weight: 700;
  color: #f0f0f0;
}

.screen {
  background-color: #fff;
  padding: 0;
  height: 650px;
  width: 366px;
  position: absolute;
  left: 50%;                                                                                                                     /*player {background: none;text-align: center;font-family: FontAwesome;color: #fff;font-size: 26px;line-height: 26px;width: 216px;height: 35px;position: asolute;bottom: 100px;left: 48%;transform: translate(-50%, 0);z-index: 10;transition: all 0.3s ease-in;border-spacing: 0;}*/
    top: 0;
    transform: translate(-50%, 0);
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  margin: 30px 0;
}

.header {
  display: inline-flex;
  margin: 0 0 40px 0;
}

input[type=checkbox] {
  visibility: hidden;
  margin: 0;
  padding: 0;
  z-index: 10;
}

label.main:before {
  position: absolute;                                                                                                                     /*player {background: none;text-align: center;font-family: FontAwesome;color: #fff;font-size: 26px;line-height: 26px;width: 216px;height: 35px;position: asolute;bottom: 100px;left: 48%;transform: translate(-50%, 0);z-index: 10;transition: all 0.3s ease-in;border-spacing: 0;}*/
  top: 23px;
  left: 23px;
  font-family: FontAwesome;
  content: '\f0c9';
  color: #959595;
  font-size: 16px;
  line-height: 16px;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease-in;
}

label.main:hover:before {                                                                                                                     /*player {background: none;text-align: center;font-family: FontAwesome;color: #fff;font-size: 26px;line-height: 26px;width: 216px;height: 35px;position: asolute;bottom: 100px;left: 48%;transform: translate(-50%, 0);z-index: 10;transition: all 0.3s ease-in;border-spacing: 0;}*/
  color: #bbb;
}

.screen > #magicButton:checked ~ label.main:before {
  color: #ff564c;
  transition: all 0.3s ease-in;
}

.coverImage {
  background: url('https://angstyteenwatchingtoomuchtv.files.wordpress.com/2015/07/tumblr_nlhsir3adc1sk2qobo1_12801.gif') no-repeat;
  background-size: cover;
  width: 366px;
  height: 366px;
  padding: 0;
  margin: 0;
  position: absolute;                                                                                                                     /*player {background: none;text-align: center;font-family: FontAwesome;color: #fff;font-size: 26px;line-height: 26px;width: 216px;height: 35px;position: asolute;bottom: 100px;left: 48%;transform: translate(-50%, 0);z-index: 10;transition: all 0.3s ease-in;border-spacing: 0;}*/
  top: 0;
  left: 0;
  transform-origin: 0% 0%;
  transition: all 0.3s ease-in;
}

.screen > #magicButton:checked ~ .coverImage {
  transform: scale(0.251, 0.251);
  left: 23px;
  top: 60px;
  transition: all 0.3s ease-in;
  border-radius: 20px;
}

.search:before {
  position: absolute;
  top: 23px;
  right: 23px;
  font-family: FontAwesome;                                                                                                                     /*player {background: none;text-align: center;font-family: FontAwesome;color: #fff;font-size: 26px;line-height: 26px;width: 216px;height: 35px;position: asolute;bottom: 100px;left: 48%;transform: translate(-50%, 0);z-index: 10;transition: all 0.3s ease-in;border-spacing: 0;}*/
  content: '\f002';
  color: #959595;
  font-size: 16px;
  line-height: 16px;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease-in;
}

.search:hover:before {
  color: #bbb;
}

.bodyPlayer {
  position: absolute;
  top: 366px;                                                                                                                     /*player {background: none;text-align: center;font-family: FontAwesome;color: #fff;font-size: 26px;line-height: 26px;width: 216px;height: 35px;position: asolute;bottom: 100px;left: 48%;transform: translate(-50%, 0);z-index: 10;transition: all 0.3s ease-in;border-spacing: 0;}*/
  left: 0;
  margin: 0;
  padding: 0;
  height: 286px;
  width: 366px;
  background: #111;
  transition: all 0.3s ease-in;
}

.screen > #magicButton:checked ~ .bodyPlayer {
  height: 470px;
  left: 0;
  top: 180px;
  transition: all 0.3s ease-in;
}

.list {
  border-spacing: 0px 2px;
  width: 342px;                                                                                                                     /*player {background: none;text-align: center;font-family: FontAwesome;color: #fff;font-size: 26px;line-height: 26px;width: 216px;height: 35px;position: asolute;bottom: 100px;left: 48%;transform: translate(-50%, 0);z-index: 10;transition: all 0.3s ease-in;border-spacing: 0;}*/
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 378px;
  left: 12px;
  transform-origin: 0% 0%;
  transform: scale(0.1, 0.1);
  transition: all 0.3s ease-in;
}

.list tr {
  transform-origin: 0% 50%;
  height: 50px;
  text-align: center;
  background: #1d1d1d;
  text-indent: 8px;
}
                                                                                                                     /*player {background: none;text-align: center;font-family: FontAwesome;color: #fff;font-size: 26px;line-height: 26px;width: 216px;height: 35px;position: asolute;bottom: 100px;left: 48%;transform: translate(-50%, 0);z-index: 10;transition: all 0.3s ease-in;border-spacing: 0;}*/
.list tr:hover {
  background: #222;
  cursor: pointer;
}

.title {
  width: 215px;
  text-align: left;
  text-indent: 15px;
  transition: all 0.11s ease-in;
}

.list tr:hover .title {
  padding-left: 5px;
  width: 210px;
  transition: all 0.11s ease-in;
}

.screen > #magicButton:checked ~ .list {                                                                                                                     /*player {background: none;text-align: center;font-family: FontAwesome;color: #fff;font-size: 26px;line-height: 26px;width: 216px;height: 35px;position: asolute;bottom: 100px;left: 48%;transform: translate(-50%, 0);z-index: 10;transition: all 0.3s ease-in;border-spacing: 0;}*/
  top: 192px;
  left: 12px;
  opacity: 1;
  visibility: visible;
  transform: scale(1, 1);
  transition: all 0.3s ease-in;
}

.screen > #magicButton:checked ~ table tr:nth-child(1) {
  opacity: 1;
  animation: harlem 0.3s linear forwards;
  animation-delay: 0.185s;
}

.screen > #magicButton:checked ~ table tr:nth-child(2) {
  animation: harlem 0.3s linear forwards;
  animation-delay: 0.2s;
}

.screen > #magicButton:checked ~ table tr:nth-child(3) {
  animation: harlem 0.3s linear forwards;
  animation-delay: 0.215s;                                                                                                                     /*player {background: none;text-align: center;font-family: FontAwesome;color: #fff;font-size: 26px;line-height: 26px;width: 216px;height: 35px;position: asolute;bottom: 100px;left: 48%;transform: translate(-50%, 0);z-index: 10;transition: all 0.3s ease-in;border-spacing: 0;}*/
}

.screen > #magicButton:checked ~ table tr:nth-child(4) {
  animation: harlem 0.3s linear forwards;
  animation-delay: 0.23s;
}

.screen > #magicButton:checked ~ table tr:nth-child(5) {
  animation: harlem 0.3s linear forwards;
  animation-delay: 0.245s;
}

.screen > #magicButton:checked ~ table tr:nth-child(6) {
  animation: harlem 0.3s linear forwards;
  animation-delay: 0.26s;
}

.screen > #magicButton:checked ~ table tr:nth-child(7) {
  animation: harlem 0.3s linear forwards;
  animation-delay: 0.275s;                                                                                                                     /*player {background: none;text-align: center;font-family: FontAwesome;color: #fff;font-size: 26px;line-height: 26px;width: 216px;height: 35px;position: asolute;bottom: 100px;left: 48%;transform: translate(-50%, 0);z-index: 10;transition: all 0.3s ease-in;border-spacing: 0;}*/
}

.screen > #magicButton:checked ~ table tr:nth-child(8) {
  animation: harlem 0.3s linear forwards;
  animation-delay: 0.29s;
}

.screen > #magicButton:checked ~ table tr:nth-child(9) {
  animation: harlem 0.3s linear forwards;
  animation-delay: 0.305s;
}

label.zmr:before {
  font-family: FontAwesome;
  content: "\f08a";
  color: #777;
  font-size: 15px;
  line-height: 15px;
  cursor: pointer;
  z-index: 10;
  transition: all 0.15s linear;
}                                                                                                                     /*player {background: none;text-align: center;font-family: FontAwesome;color: #fff;font-size: 26px;line-height: 26px;width: 216px;height: 35px;position: asolute;bottom: 100px;left: 48%;transform: translate(-50%, 0);z-index: 10;transition: all 0.3s ease-in;border-spacing: 0;}*/

td > #heart:checked ~ label.zmr:before {
  content: "\f004";
  color: #ff564c;
  transition: all 0.15s linear;
}

td > #heart1:checked ~ label.zmr:before {
  content: "\f004";
  color: #ff564c;
  transition: all 0.15s linear;
}

td > #heart2:checked ~ label.zmr:before {
  content: "\f004";
  color: #ff564c;
  transition: all 0.15s linear;
}                                                                                                                     /*player {background: none;text-align: center;font-family: FontAwesome;color: #fff;font-size: 26px;line-height: 26px;width: 216px;height: 35px;position: asolute;bottom: 100px;left: 48%;transform: translate(-50%, 0);z-index: 10;transition: all 0.3s ease-in;border-spacing: 0;}*/

td > #heart3:checked ~ label.zmr:before {
  content: "\f004";
  color: #ff564c;
  transition: all 0.15s linear;
}

td > #heart4:checked ~ label.zmr:before {
  content: "\f004";
  color: #ff564c;
  transition: all 0.15s linear;
}

td > #heart5:checked ~ label.zmr:before {
  content: "\f004";
  color: #ff564c;
  transition: all 0.15s linear;
}                                                                                                                     /*player {background: none;text-align: center;font-family: FontAwesome;color: #fff;font-size: 26px;line-height: 26px;width: 216px;height: 35px;position: asolute;bottom: 100px;left: 48%;transform: translate(-50%, 0);z-index: 10;transition: all 0.3s ease-in;border-spacing: 0;}*/

td > #heart6:checked ~ label.zmr:before {
  content: "\f004";
  color: #ff564c;
  transition: all 0.15s linear;
}

td > #heart7:checked ~ label.zmr:before {
  content: "\f004";
  color: #ff564c;
  transition: all 0.15s linear;
}

td > #heart8:checked ~ label.zmr:before {
  content: "\f004";
  color: #ff564c;
  transition: all 0.15s linear;
}
                                                                                                                     /*player {background: none;text-align: center;font-family: FontAwesome;color: #fff;font-size: 26px;line-height: 26px;width: 216px;height: 35px;position: asolute;bottom: 100px;left: 48%;transform: translate(-50%, 0);z-index: 10;transition: all 0.3s ease-in;border-spacing: 0;}*/
.bar {
  background: url('http://imgh.us/bar_3.svg') no-repeat;
  background-size: 100%;
  width: 320px;
  height: 21px;
  position: absolute;
  top: 407px;
  left: 23px;
  transform-origin: 0% 0%;
  transition: all 0.3s ease-in;
}

.screen > #magicButton:checked ~ .bar {
  top: 119px;
  left: 126px;
  transform: scale(0.6875, 0.6875);                                                                                                                     /*player {background: none;text-align: center;font-family: FontAwesome;color: #fff;font-size: 26px;line-height: 26px;width: 216px;height: 35px;position: asolute;bottom: 100px;left: 48%;transform: translate(-50%, 0);z-index: 10;transition: all 0.3s ease-in;border-spacing: 0;}*/
  transition: all 0.3s ease-in;
}

.info {
  width: 157px;
  position: absolute;
  left: 104px;
  top: 440px;
  transition: all 0.3s ease-in;
}

.screen > #magicButton:checked ~ .info {
  top: 66px;
  left: 126px;
  text-align: left;
  transition: all 0.3s ease-in;
}                                                                                                                     /*player {background: none;text-align: center;font-family: FontAwesome;color: #fff;font-size: 26px;line-height: 26px;width: 216px;height: 35px;position: asolute;bottom: 100px;left: 48%;transform: translate(-50%, 0);z-index: 10;transition: all 0.3s ease-in;border-spacing: 0;}*/

.screen > #magicButton:checked ~ .info h4 {
  margin-left: 0;
  font-size: 16px;
  color: #111111;
  transition: all 0.3s ease-in;
}

.player {
  background: none;
  text-align: center;
  font-family: FontAwesome;
  color: #fff;
  font-size: 26px;
  line-height: 26px;
  width: 216px;                                                                                                                     /*player {background: none;text-align: center;font-family: FontAwesome;color: #fff;font-size: 26px;line-height: 26px;width: 216px;height: 35px;position: asolute;bottom: 100px;left: 48%;transform: translate(-50%, 0);z-index: 10;transition: all 0.3s ease-in;border-spacing: 0;}*/
  height: 35px;
  position: absolute;
  bottom: 100px;
  left: 48%;
  transform: translate(-50%, 0);
  z-index: 10;
  transition: all 0.3s ease-in;
  border-spacing: 0;
}

.player td {
  width: 72px;
}

.backward:before {
  content: "\f04a";
  cursor: pointer;
  transition: all 0.15s linear;
}
                                                                                                                     /*player {background: none;text-align: center;font-family: FontAwesome;color: #fff;font-size: 26px;line-height: 26px;width: 216px;height: 35px;position: asolute;bottom: 100px;left: 48%;transform: translate(-50%, 0);z-index: 10;transition: all 0.3s ease-in;border-spacing: 0;}*/
.play:before {
  content: "\f04b";
  cursor: pointer;
  transition: all 0.15s linear;
}

.forward:before {
  content: "\f04e";
  cursor: pointer;
  transition: all 0.15s linear;
}

.backward:hover:before {                                                                                                                     /*player {background: none;text-align: center;font-family: FontAwesome;color: #fff;font-size: 26px;line-height: 26px;width: 216px;height: 35px;position: asolute;bottom: 100px;left: 48%;transform: translate(-50%, 0);z-index: 10;transition: all 0.3s ease-in;border-spacing: 0;}*/
  color: #bbb;
  transition: all 0.15s linear;
}

.play:hover:before {
  color: #bbb;
  transition: all 0.15s linear;
}

.forward:hover:before {
  color: #bbb;
  transition: all 0.15s linear;
}

td > #play:checked ~ label.play:before {
  content: "\f04c";                                                                                                                     /*player {background: none;text-align: center;font-family: FontAwesome;color: #fff;font-size: 26px;line-height: 26px;width: 216px;height: 35px;position: asolute;bottom: 100px;left: 48%;transform: translate(-50%, 0);z-index: 10;transition: all 0.3s ease-in;border-spacing: 0;}*/
  transition: all 0.15s linear;
}

.screen > #magicButton:checked ~ .player {
  bottom: 4px;
  left: -44px;
  transform: scale(0.45, 0.45);
  transition: all 0.3s ease-in;
}

.shadow {
  background: rgba(17, 17, 17, 0.8);
  width: 366px;
  height: 50px;
  position: absolute;
  bottom: -12px;                                                                                                                     /*player {background: none;text-align: center;font-family: FontAwesome;color: #fff;font-size: 26px;line-height: 26px;width: 216px;height: 35px;position: asolute;bottom: 100px;left: 48%;transform: translate(-50%, 0);z-index: 10;transition: all 0.3s ease-in;border-spacing: 0;}*/
  left: 0;
  box-shadow: 0px -15px 40px rgba(17, 17, 17, 0.8);
}

.footer {
  background: none;
  font-family: FontAwesome;
  color: #6d6d6d;
  font-size: 15px;
  line-height: 15px;
  height: 45px;
  width: 360px;
  position: absolute;
  bottom: 10px;
  left: 23px;
  z-index: 20;
  transition: all 0.15s linear;                                                                                                                     /*player {background: none;text-align: center;font-family: FontAwesome;color: #fff;font-size: 26px;line-height: 26px;width: 216px;height: 35px;position: asolute;bottom: 100px;left: 48%;transform: translate(-50%, 0);z-index: 10;transition: all 0.3s ease-in;border-spacing: 0;}*/
  transition: bottom 0.3s linear;
}

.love:before {
  content: "\f08a";
  cursor: pointer;
  transition: all 0.15s linear;
}

.shuffle:before {
  content: "\f074";
  cursor: pointer;
  transition: all 0.15s linear;                                                                                                                     /*player {background: none;text-align: center;font-family: FontAwesome;color: #fff;font-size: 26px;line-height: 26px;width: 216px;height: 35px;position: asolute;bottom: 100px;left: 48%;transform: translate(-50%, 0);z-index: 10;transition: all 0.3s ease-in;border-spacing: 0;}*/
}

.repeat:before {
  content: "\f01e";
  cursor: pointer;
  transition: all 0.15s linear;
}

.options:before {
  content: "\f141";
  cursor: pointer;
  transition: all 0.15s linear;
}

.love:hover:before {
  color: #bbb;
  transition: all 0.15s linear;
}

.shuffle:hover:before {                                                                                                                     /*player {background: none;text-align: center;font-family: FontAwesome;color: #fff;font-size: 26px;line-height: 26px;width: 216px;height: 35px;position: asolute;bottom: 100px;left: 48%;transform: translate(-50%, 0);z-index: 10;transition: all 0.3s ease-in;border-spacing: 0;}*/
  color: #bbb;
  transition: all 0.15s linear;
}

.repeat:hover:before {
  color: #bbb;
  transition: all 0.15s linear;
}

.options:hover:before {
  color: #bbb;
  transition: all 0.15s linear;
}

td > #love:checked ~ label.love:before {
  content: "\f004";                                                                                                                     /*player {background: none;text-align: center;font-family: FontAwesome;color: #fff;font-size: 26px;line-height: 26px;width: 216px;height: 35px;position: asolute;bottom: 100px;left: 48%;transform: translate(-50%, 0);z-index: 10;transition: all 0.3s ease-in;border-spacing: 0;}*/
  color: #ff564c;
  transition: all 0.15s linear;
}

td > #shuffle:checked ~ label.shuffle:before {
  color: #ff564c;
  transition: all 0.15s linear;
}

td > #repeat:checked ~ label.repeat:before {
  color: #ff564c;
  transition: all 0.15s linear;
}

.screen > #magicButton:checked ~ .footer {
  bottom: -60px;
  transition: all 0.3s ease-in;                                                                                                                     /*player {background: none;text-align: center;font-family: FontAwesome;color: #fff;font-size: 26px;line-height: 26px;width: 216px;height: 35px;position: asolute;bottom: 100px;left: 48%;transform: translate(-50%, 0);z-index: 10;transition: all 0.3s ease-in;border-spacing: 0;}*/
}

.current {
  position: absolute;
  right: 23px;
  bottom: -60px;
  transition: all 0.3s ease-in;
}

.screen > #magicButton:checked ~ .current {
  bottom: 17px;
  transition: all 0.3s ease-in;
}

audio {
  visibility: hidden;                                                                                                                     /*player {background: none;text-align: center;font-family: FontAwesome;color: #fff;font-size: 26px;line-height: 26px;width: 216px;height: 35px;position: asolute;bottom: 100px;left: 48%;transform: translate(-50%, 0);z-index: 10;transition: all 0.3s ease-in;border-spacing: 0;}*/
}
Enter fullscreen mode Exit fullscreen mode

Add JavaScript Code

The following codes are JavaScript programming codes. Very little of this code has been used to create this music player. Even if you don't use it. Copy these codes manually to add them to your project. Then paste the add javascript code in the upper structure.

var audio = document.getElementById('audio');
var playpause = document.getElementById("play");


function togglePlayPause() {
   if (audio.paused || audio.ended) {
      playpause.title = "Pause";                                                                                                                     /*player {background: none;text-align: center;font-family: FontAwesome;color: #fff;font-size: 26px;line-height: 26px;width: 216px;height: 35px;position: asolute;bottom: 100px;left: 48%;transform: translate(-50%, 0);z-index: 10;transition: all 0.3s ease-in;border-spacing: 0;}*/
      audio.play();
   } else {
      playpause.title = "Play";
      audio.pause();
   }
}

Enter fullscreen mode Exit fullscreen mode

By adding these three types of code you can make this music player beautiful. I have written down the code I am using for the purpose of making this player. As a result, when you read the code, you will have the advantage to say. Hopefully from this article, you have understood in a very nice way how to make a music player using only HTML and CSS programming language. If you encounter any problems while making it, you can definitely comment. I will completely help you to make this player.


  🙏💚💛 If you like the music player, do a like. 💛💜🙏
Enter fullscreen mode Exit fullscreen mode

Discussion

pic
Editor guide