{"id":6636,"date":"2024-02-13T01:49:00","date_gmt":"2024-02-13T01:49:00","guid":{"rendered":"https:\/\/foolishdeveloper.com\/?p=6636"},"modified":"2024-02-12T01:16:35","modified_gmt":"2024-02-12T01:16:35","slug":"build-a-music-player-using-javascript","status":"publish","type":"post","link":"https:\/\/foolishdeveloper.com\/build-a-music-player-using-javascript\/","title":{"rendered":"Build a Music Player Using JavaScript – Free Demo + Code"},"content":{"rendered":"\n

Introduction <\/h2>\n\n\n\n

Hello Coder! Welcome To the foolishdeveloper Blog. In This Blog, We Learn How To Build a Music Player using HTML, CSS, and JavaScript. This tutorial is going to be completely beginner-friendly. We all know that managing code is important while building a project so that it will be easy for the user to use that code in the future as well. So we will follow the same method we will be creating the different files for creating our project. We recommend that you also follow the same file structure.<\/p>\n\n\n\n

30+ Javascript Projects with Source Code<\/a><\/p>\n\n\n\n

Preview of Music Player<\/h2>\n\n\n\n
\"Music<\/figure>\n\n\n\n

Music Player Demo<\/h2>\n\n\n\n

Step 1: HTML Code for Music Player<\/h2>\n\n\n\n

Create a file with the name of the index.html and paste the following code:-<\/p>\n\n\n\n

<div class=\"player\" id=\"ap\">\n  <audio><\/audio>\n  <div class=\"player_body\">\n    <div class=\"hamburger-menu\">\n      <div class=\"bar\"><\/div>\n    <\/div>\n    <div class=\"nav_menu\" id=\"navMenu\">\n      <div class=\"nav_list\">\n        <div class=\"nav_item\">\n          <p>Developed by:<\/p>\n          <a href=\"https:\/\/www.linkedin.com\/in\/vladislav-kubyshkin-b15b18128\" target=\"_blank\">Vladislav Kubyshkin<\/a>\n        <\/div>\n        <div class=\"nav_item\">\n          <p>Template designed by:<\/p>\n          <a href=\"https:\/\/dribbble.com\/rezashintia\" target=\"_blank\">Reza Shintia Dewi<\/a>\n        <\/div>\n      <\/div>\n    <\/div>\n\n<!--     <div class=\"player_playlist\" id=\"pl_playlist\">\n      <ul class=\"player_playlist_list jAudio--playlist\">\n        \n   <div class=\"player_playlist_item\">\n          <div class=\"song_block\">\n            <h6>Song name<\/h6>\n            <p>Song artist<\/p>\n          <\/div>\n          <div class=\"song_time\">\n            <div>0:00<\/div>\n          <\/div>\n        <\/div> \n        \n      <\/ul>\n    <\/div> -->\n\n    <div class=\"player_fade\"><\/div>\n    <div class=\"player_content\">\n      <div class=\"player_header\">\n        <div class=\"container-fluid\">\n          <div class=\"row\">\n            <div class=\"col-xs-2\">\n              <div class=\"back_btn\"><span class=\"glyphicon glyphicon-menu-left\" aria-hidden=\"true\"><\/span><\/div>\n            <\/div>\n            <div class=\"col-xs-8\">\n              <div class=\"header_name text-center\" id=\"nowPlay\">\n                <span id=\"npAction\">PAUSED...<\/span>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n      <div class=\"album_wrap\">\n        <div class=\"no_album_img\"><div class=\"jAudio--thumb\"><\/div><\/div>\n        \n      <\/div>\n      <div class=\"song_playing text-center\">\n<!--    <div class=\"song_name\"><span id=\"npName\">Hi Dribbble!<\/span><\/div>\n        <div class=\"artist_name\"><span id=\"npArtist\">Reza Shintia Dewi<\/span><\/div> -->\n      <\/div>\n      <div class=\"timeline_wrap\">\n\n<!--    <div class=\"timeline\">\n          <div class=\"line_played\"><\/div>\n          <div class=\"full_line\"><\/div>\n        <\/div> -->\n\n        <div class='timeline progress-bar-wrapper'>\n          <div class='full_line'><\/div>\n          <div class=\"line_preload\"><\/div>\n          <div class='line_played'>\n            <span class='progress-bar-pointer'><\/span>\n          <\/div>\n          \n          \n        <\/div>\n\n        <div class=\"time_of_song\">\n          <div class=\"container-fluid\">\n            <div class=\"row\">\n              <div class=\"col-xs-2\">\n                <span class=\"time_played\">00:00<\/span>\n              <\/div>\n              <div class=\"col-xs-2 col-xs-offset-8\">\n                <span class=\"full_time\">00:00<\/span>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n      <div class=\"player_btns\">\n        <div class=\"container-fluid\">\n          <div class=\"row\">\n            <div class=\"col-xs-2\">\n              <div class=\"random_btn text-center\" id=\"random\"><span class=\"glyphicon glyphicon-random\" aria-hidden=\"true\"><\/span><\/div>\n            <\/div>\n            <div class=\"col-xs-2\">\n              <div class=\"prev_btn text-center\" id=\"btnPrev\" data-action='prev'><span class=\"glyphicon glyphicon-backward\" aria-hidden=\"true\"><\/span><\/div>\n            <\/div>\n            <div class=\"col-xs-3\">\n              <div class=\"play_btn text-center\" id=\"play\" data-action='play'>\n                <span class=\"glyphicon glyphicon-play\" id=\"play_circle\" aria-hidden=\"true\"><\/span>\n              <\/div>\n            <\/div>\n            <div class=\"col-xs-2\">\n              <div class=\"next_btn text-center\" id=\"btnNext\" data-action='next'><span class=\"glyphicon glyphicon-forward\" aria-hidden=\"true\"><\/span><\/div>\n            <\/div>\n            <div class=\"col-xs-2\">\n              <div class=\"repeat_btn text-center\" id=\"repeat\"><span class=\"glyphicon glyphicon-retweet\" aria-hidden=\"true\"><\/span><\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n    <div class=\"waves\">\n      <svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 275 223.7\" style=\"enable-background:new 0 0 275 223.7;\" xml:space=\"preserve\">\n        <style type=\"text\/css\">\n          .st0{fill:url(#SVGID_1_);}\n          .st1{fill:url(#SVGID_2_);}\n          .st2{fill:url(#SVGID_3_);}\n        <\/style>\n        <linearGradient id=\"SVGID_1_\" gradientUnits=\"userSpaceOnUse\" x1=\"137.5\" y1=\"-19.8534\" x2=\"137.5\" y2=\"92.9036\">\n          <stop  offset=\"0.104\" style=\"stop-color:#FF8FCF;stop-opacity:0\"\/>\n          <stop  offset=\"1\" style=\"stop-color:#FF8FCF;stop-opacity:0.7\"\/>\n        <\/linearGradient>\n        <path class=\"st0\" d=\"M258.3,68c-21.8-6.7-21.5-47.8-31-48.3c-15.4-0.9-26.7,107.3-47.7,108c-16.6,0.6-26.8-67-46.7-66.3\n          c-14.7,0.5-20,37.9-31.3,37.3c-18.2-0.9-24-98.7-36-98.7C54.7,0,49.5,82,36,82.3C25.4,82.6,18,32.1,8.3,33C3.2,33.5,0.7,47.8,0,51.7\n          v172h275v-158C270.3,67.9,265,70,258.3,68z\"\/>\n        <linearGradient id=\"SVGID_2_\" gradientUnits=\"userSpaceOnUse\" x1=\"137.5\" y1=\"26.8924\" x2=\"137.5\" y2=\"179.8649\">\n          <stop  offset=\"0\" style=\"stop-color:#33D4FA;stop-opacity:0\"\/>\n          <stop  offset=\"1\" style=\"stop-color:#33D4FA;stop-opacity:0.7\"\/>\n        <\/linearGradient>\n        <path class=\"st1\" d=\"M261.8,94.7c-19.3,3.2-28.2-24.1-48.5-24.3c-22.5-0.2-29.2,33.3-47.3,32.2c-24.6-1.5-32.5-64.7-52-64.2\n          C98.1,38.8,92.6,81,77.3,80.8c-16.6-0.2-25.5-50.3-36-49C29.8,33.3,29.8,95.4,17,96.5c-4.7,0.4-7-7.8-17-9.8v137h275V87.4\n          C271.7,90.5,267.5,93.7,261.8,94.7z\"\/>\n        <linearGradient id=\"SVGID_3_\" gradientUnits=\"userSpaceOnUse\" x1=\"137.5\" y1=\"6.0051\" x2=\"137.5\" y2=\"144.9296\">\n          <stop  offset=\"3.960396e-02\" style=\"stop-color:#33D4FA;stop-opacity:0\"\/>\n          <stop  offset=\"1\" style=\"stop-color:#00B2FA\"\/>\n        <\/linearGradient>\n        <path class=\"st2\" d=\"M275,223.7V87.8c-6.2,4.4-15.4,9.1-26,8.9c-29.2-0.7-36.9-39.1-61.2-38.7c-22.1,0.4-29.1,32.4-46,30.3\n          c-22.8-2.8-26.7-63.5-42.2-63.7c-16.5-0.1-25.2,68.9-42,68.5c-13.7-0.3-22.4-46.7-32.5-45c-4.3,0.8-8.1,10.3-10.7,16.8\n          C12.3,70.5,11.7,74.4,8,79c-2.7,3.4-5.8,5.4-8,6.7v138H275z\"\/>\n        <\/svg>\n    <\/div>\n  <\/div>\n<\/div>\n\n<div id=\"preloader\">\n  <div id=\"status\">\n     <div class=\"spinner\">\n      <div class=\"rect1\"><\/div>\n      <div class=\"rect2\"><\/div>\n      <div class=\"rect3\"><\/div>\n      <div class=\"rect4\"><\/div>\n      <div class=\"rect5\"><\/div>\n    <\/div>\n  <\/div>\n<\/div><\/pre>\n\n\n\n
Here’s the explanation for the above code:-<\/strong><\/p>\n\n\n\n
Audio Player Container:<\/strong> The container we have created inside the div has a class of “player” and an ID of “ap,”<\/p>\n\n\n\n
Audio Element:<\/strong> This element will be used to hold the audio source.<\/p>\n\n\n\n
Player Body:<\/strong> This div have the class “player_body” that encompasses the entire player interface in which we have defined the controls for the music player like the navigation menu, content display, buttons, and other elements.<\/p>\n\n\n\n
Navigation Menu:<\/strong> This menu is enclosed within the <div><\/code> with the class name “nav_menu” and an ID of “navMenu.”<\/p>\n\n\n\n
Drawing App using HTML, CSS, and JavaScript (Free Code)<\/a><\/p>\n\n\n\n
HTML Output For Music Player <\/h2>\n\n\n\n
\"Music<\/figure>\n\n\n\n
Step 2: CSS Code For Music Player<\/h2>\n\n\n\n
Create another file name as “index.css” and paste the following code:-<\/p>\n\n\n\n
body,\nhtml {\n  font-family: 'Roboto', sans-serif;\n  font-size: 15px;\n  position: relative;\n  z-index: 0;\n  width: 100%;\n  height: 100%;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  background-color: rgba(215, 243, 246, 1);\n  text-shadow: 1px 1px 1px rgba(0, 0, 0, .004);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  -khtml-user-select: none;\n}\n\n#preloader {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 178, 250, 1);\n  -webkit-background-size: cover;\n  -moz-background-size: cover;\n  -o-background-size: cover;\n  background-size: cover;\n  height: 100%;\n  z-index: 500;\n  \/* makes sure it stays on top *\/\n}\n\n#status {\n  width: 50px;\n  height: 30px;\n  position: fixed;\n  left: 50%;\n  \/* centers the loading animation horizontally one the screen *\/\n  top: 50%;\n  \/* centers the loading animation vertically one the screen *\/\n  margin: -25px 0 0 -15px;\n  \/* is width and height divided by two *\/\n}\n\n.spinner {\n  margin: 0px auto;\n  width: 50px;\n  height: 30px;\n  text-align: center;\n  font-size: 10px;\n}\n\n.spinner > div {\n  background-color: #fff;\n  height: 100%;\n  width: 6px;\n  display: inline-block;\n  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;\n  animation: stretchdelay 1.2s infinite ease-in-out;\n}\n\n.spinner .rect2 {\n  -webkit-animation-delay: -1.1s;\n  animation-delay: -1.1s;\n}\n\n.spinner .rect3 {\n  -webkit-animation-delay: -1.0s;\n  animation-delay: -1.0s;\n}\n\n.spinner .rect4 {\n  -webkit-animation-delay: -0.9s;\n  animation-delay: -0.9s;\n}\n\n.spinner .rect5 {\n  -webkit-animation-delay: -0.8s;\n  animation-delay: -0.8s;\n}\n\n@-webkit-keyframes stretchdelay {\n  0%,\n  40%,\n  100% {\n    -webkit-transform: scaleY(0.4)\n  }\n  20% {\n    -webkit-transform: scaleY(1.0)\n  }\n}\n\n@keyframes stretchdelay {\n  0%,\n  40%,\n  100% {\n    transform: scaleY(0.4);\n    -webkit-transform: scaleY(0.4);\n  }\n  20% {\n    transform: scaleY(1.0);\n    -webkit-transform: scaleY(1.0);\n  }\n}\n\n.player {\n  position: relative;\n  z-index: 5;\n  width: 100%;\n  padding: 18px 0;\n}\n\n.player_body {\n  position: relative;\n  z-index: 10;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  overflow: hidden;\n  width: 275px;\n  height: 490px;\n  margin: auto;\n  background: rgba(255, 255, 255, 1);\n  box-shadow: 0 5px 10px 2px rgba(0, 0, 0, .15), 0 15px 35px 0 rgba(0, 105, 92, .5);\n}\n\n.waves {\n  position: relative;\n  z-index: 20;\n  top: -220px;\n  -webkit-transition: top .2s ease-in-out;\n  transition: top .2s ease-in-out;\n}\n\n.waves.waves_up {\n  top: -430px;\n}\n\n.player_content {\n  position: relative;\n  z-index: 50;\n  width: 100%;\n  height: 490px;\n}\n\n.player_header {\n  position: relative;\n  z-index: 55;\n  padding: 18px 0;\n  color: rgba(0, 178, 250, 1);\n  background-color: rgba(255, 255, 255, 1);\n}\n\n.header_name {\n  font-size: 13px;\n  font-weight: 500;\n  text-transform: uppercase;\n}\n\n\n\/* Hamburger menu *\/\n\n.hamburger-menu,\n.back_btn,\n.nav_menu {\n  -webkit-transition: all .2s ease-in-out;\n  transition: all .2s ease-in-out;\n}\n\n.hamburger-menu {\n  position: absolute;\n  z-index: 70;\n  top: 18px;\n  right: 16px;\n  width: 15px;\n  height: 15px;\n  cursor: pointer;\n}\n\n.hamburger-menu.slide {\n  margin-right: 232px;\n}\n\n.back_btn.slide {\n  margin-left: -232px;\n}\n\n.nav_menu {\n  position: absolute;\n  z-index: 70;\n  right: -235px;\n  width: 235px;\n  height: 100%;\n  background-color: rgba(255, 255, 255, 1);\n}\n\n.nav_list {\n  position: relative;\n}\n\n.nav_item {\n  padding: 15px 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, .1);\n}\n\n.nav_item p {\n  font-size: 14px;\n  font-weight: 300;\n  margin: -1px 0;\n  color: rgba(0, 0, 0, .9);\n}\n\n.nav_item a {\n  font-size: 22px;\n  font-weight: 300;\n  color: rgba(0, 0, 0, 1);\n}\n\n.nav_menu.open {\n  right: 0;\n}\n\n.player_fade {\n  -webkit-transition: background .2s ease-in-out;\n  transition: background .2s ease-in-out;\n  background: rgba(0, 0, 0, 0);\n}\n\n.player_fade.player_fade_on {\n  position: absolute;\n  z-index: 65;\n  width: 275px;\n  height: 490px;\n  background: rgba(0, 0, 0, .5);\n}\n\n.bar,\n.bar:after,\n.bar:before {\n  width: 15px;\n  height: 3px;\n}\n\n.bar {\n  position: relative;\n  -webkit-transition: all 0ms 300ms;\n  transition: all 0ms 300ms;\n  -webkit-transform: translateY(6px);\n  transform: translateY(6px);\n  background: rgba(0, 178, 250, 1);\n}\n\n.bar.animate {\n  background: rgba(0, 178, 250, 0);\n}\n\n.bar:before {\n  position: absolute;\n  bottom: 6px;\n  left: 0;\n  content: '';\n  -webkit-transition: bottom 300ms 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms cubic-bezier(.23, 1, .32, 1);\n  transition: bottom 300ms 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms cubic-bezier(.23, 1, .32, 1);\n  transition: bottom 300ms 300ms cubic-bezier(.23, 1, .32, 1), transform 300ms cubic-bezier(.23, 1, .32, 1);\n  transition: bottom 300ms 300ms cubic-bezier(.23, 1, .32, 1), transform 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms cubic-bezier(.23, 1, .32, 1);\n  background: rgba(0, 178, 250, 1);\n}\n\n.bar:after {\n  position: absolute;\n  top: 6px;\n  left: 0;\n  content: '';\n  -webkit-transition: top 300ms 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms cubic-bezier(.23, 1, .32, 1);\n  transition: top 300ms 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms cubic-bezier(.23, 1, .32, 1);\n  transition: top 300ms 300ms cubic-bezier(.23, 1, .32, 1), transform 300ms cubic-bezier(.23, 1, .32, 1);\n  transition: top 300ms 300ms cubic-bezier(.23, 1, .32, 1), transform 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms cubic-bezier(.23, 1, .32, 1);\n  background: rgba(0, 178, 250, 1);\n}\n\n.bar.animate:after {\n  top: 0;\n  -webkit-transition: top 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms 300ms cubic-bezier(.23, 1, .32, 1);\n  transition: top 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms 300ms cubic-bezier(.23, 1, .32, 1);\n  transition: top 300ms cubic-bezier(.23, 1, .32, 1), transform 300ms 300ms cubic-bezier(.23, 1, .32, 1);\n  transition: top 300ms cubic-bezier(.23, 1, .32, 1), transform 300ms 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms 300ms cubic-bezier(.23, 1, .32, 1);\n  -webkit-transform: rotate(45deg);\n  transform: rotate(45deg);\n}\n\n.bar.animate:before {\n  bottom: 0;\n  -webkit-transition: bottom 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms 300ms cubic-bezier(.23, 1, .32, 1);\n  transition: bottom 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms 300ms cubic-bezier(.23, 1, .32, 1);\n  transition: bottom 300ms cubic-bezier(.23, 1, .32, 1), transform 300ms 300ms cubic-bezier(.23, 1, .32, 1);\n  transition: bottom 300ms cubic-bezier(.23, 1, .32, 1), transform 300ms 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms 300ms cubic-bezier(.23, 1, .32, 1);\n  -webkit-transform: rotate(-45deg);\n  transform: rotate(-45deg);\n  ;\n}\n\n\n\/* ------------------------------------- *\/\n\n.player_playlist {\n  position: absolute;\n  z-index: 60;\n  top: 490px;\n  overflow: scroll;\n  overflow-x: hidden;\n  width: 275px;\n  height: 305px;\n  -webkit-transition: top .2s ease-in-out;\n  transition: top .2s ease-in-out;\n  background-color: rgba(255, 255, 255, 1);\n}\n\n.player_playlist::-webkit-scrollbar {\n  width: 5px !important;\n}\n\n.player_playlist::-webkit-scrollbar-track {\n  background-color: rgba(0, 0, 0, .1) !important;\n}\n\n.player_playlist::-webkit-scrollbar-thumb {\n  background-color: rgba(0, 0, 0, .3) !important;\n}\n\n.player_playlist_list {\n  position: relative;\n}\n\n\n\/*  *\/\n\n.player_playlist_item {\n  width: 100%;\n  padding: 4px 18px;\n  cursor: pointer;\n  border-bottom: 1px solid rgba(0, 0, 0, .1);\n}\n\n.player_playlist_item:hover {\n  background: #e6e6e6;\n}\n\n.player_playlist_item:active {\n  background: #d2d2d2;\n}\n\n.player_playlist_item.active {\n  border-bottom-color: #7d7d7d;\n  background: #7d7d7d;\n}\n\n.player_playlist_item.active * {\n  color: #fff;\n}\n\n.song_block {\n  display: inline-block;\n}\n\n.song block h6 {\n  font-size: 14px;\n  font-weight: 500;\n  margin-bottom: 3px;\n}\n\n.song_block p {\n  font-size: 11px;\n  color: rgba(144, 144, 144, 1);\n}\n\n.song_time {\n  font-size: 11px;\n  position: relative;\n  top: 20px;\n  float: right;\n  color: rgba(144, 144, 144, 1);\n}\n\n.glyphicon-menu-left {\n  -webkit-transition: all .2s ease-in-out;\n  transition: all .2s ease-in-out;\n}\n\n.glyphicon-menu-left.back_btn_on {\n  -webkit-transform: rotate(-90deg);\n  transform: rotate(-90deg);\n}\n\n.player_playlist.playlist_on {\n  top: 185px;\n}\n\n.album_wrap {\n  position: relative;\n  z-index: 40;\n  top: 0;\n  padding: 18px 0 30px 0;\n  -webkit-transition: top .3s ease-in-out;\n  transition: top .3s ease-in-out;\n}\n\n.album_wrap.album_up {\n  top: -300px;\n  -webkit-transition: top .2s ease-in-out;\n  transition: top .2s ease-in-out;\n}\n\n.jAudio--thumb {\n  width: 150px;\n  height: 150px;\n  margin-right: auto;\n  margin-left: auto;\n  background-image: url(\"\");\n  background-repeat: no-repeat;\n  background-size: cover;\n  -webkit-transition: background-image .2s ease-in-out;\n  transition: background-image .2s ease-in-out;\n}\n\n.no_album_img {\n  width: 150px;\n  height: 150px;\n  margin-right: auto;\n  margin-left: auto;\n  background: url(https:\/\/s30.postimg.org\/shr4aygpt\/default_album_art_blue2.jpg);\n  background-repeat: no-repeat;\n  background-size: cover;\n  box-shadow: 0 10px 20px -15px rgba(0, 0, 0, .35), 0 22px 40px -15px rgba(0, 0, 0, .20);\n}\n\n.song_playing {\n  height: 113px;\n  font-size: 14.5px;\n  line-height: 135%;\n  position: relative;\n  top: 0;\n  padding: 6px 0 69px 0;\n  -webkit-transition: top .5s ease-in-out;\n  transition: top .5s ease-in-out;\n}\n\n.song_playing.song_playing_up {\n  top: -300px;\n  -webkit-transition: top .2s ease-in-out;\n  transition: top .2s ease-in-out;\n}\n\n.song_name {\n  font-weight: 500;\n}\n\n.artist_name {\n  font-size: 10.5px;\n  color: rgba(144, 144, 144, 1);\n}\n\n.timeline_wrap {\n  position: relative;\n  position: relative;\n  top: 0;\n  margin-top: 5px;\n  -webkit-transition: top .2s ease-in-out;\n  transition: top .2s ease-in-out;\n}\n\n.line_played {\n  position: absolute;\n  top: 3px;\n  height: 3px;\n  background-color: rgba(255, 255, 255, 1);\n}\n\n.line_preload {\n  position: absolute;\n  top: 4px;\n  height: 2px;\n  background-color: rgb(0, 129, 181);\n}\n\n.line_preload.line_preload_up {\n  background-color: rgba(0, 0, 0, 0.15);\n}\n\n.progress-bar-wrapper {\n  width: 100%;\n  height: 10px;\n  cursor: pointer;\n}\n\n.full_line {\n  position: absolute;\n  top: 4px;\n  width: 100%;\n  height: 2px;\n  -webkit-transition: background-color .2s ease-in-out;\n  transition: background-color .2s ease-in-out;\n  background-color: rgba(255, 255, 255, .4);\n}\n\n.progress-bar-pointer {\n  position: absolute;\n  top: 0;\n  right: -1px;\n  width: 0;\n  height: 0;\n  -webkit-transition: all .1s ease-in-out;\n  transition: all .1s ease-in-out;\n  border-radius: 50%;\n  background: #fff;\n}\n\n.progress-bar-wrapper:hover .progress-bar-pointer {\n  top: -3px;\n  right: -5px;\n  width: 10px;\n  height: 10px;\n}\n\n.progress-bar-pointer.progress-bar-pointer_up {\n  background: rgba(0, 178, 250, 1);\n}\n\n.time_of_song {\n  font-size: 9px;\n  padding-top: 7px;\n  -webkit-transition: color .2s ease-in-out;\n  transition: color .2s ease-in-out;\n  color: rgba(255, 255, 255, 1);\n}\n\n.player_btns {\n  position: relative;\n  z-index: 1;\n  top: -5px;\n  left: 14px;\n  width: 270px;\n  padding-top: 33px;\n  -webkit-transition: all .2s ease-in-out;\n  transition: all .2s ease-in-out;\n  color: rgba(255, 255, 255, 1);\n}\n\n.play_btn {\n  position: absolute;\n  top: -16px;\n  left: 8px;\n  width: 51px;\n  height: 51px;\n  color: rgba(0, 178, 250, 1);\n  border-radius: 50%;\n  background-color: rgba(255, 255, 255, 1);\n  box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);\n}\n\n.timeline_wrap.timeline_wrap_up,\n.player_btns.player_btns_up {\n  top: -305px;\n  color: rgba(0, 0, 0, 1);\n}\n\n.line_played.line_played_up {\n  top: 3px;\n  background-color: rgba(0, 178, 250, 1);\n}\n\n.full_line.full_line_up {\n  background-color: rgba(0, 178, 250, .4);\n}\n\n.time_of_song.time_of_song_up {\n  color: rgba(0, 178, 250, 1);\n}\n\n#play_circle {\n  top: 17px;\n  left: 1px;\n}\n\n.back_btn:hover {\n  cursor: pointer;\n}\n\n.random_btn:hover,\n.prev_btn:hover,\n.next_btn:hover,\n.repeat_btn:hover {\n  cursor: pointer;\n  color: rgba(0, 47, 62, 1);\n}\n\n.play_btn:hover {\n  cursor: pointer;\n  background-color: rgba(0, 47, 62, 1);\n}\n\n.random_btn_on,\n.repeat_btn_on {\n  color: rgba(0, 47, 62, 1);\n}\n\n.touch-screen .menu_btn:hover,\n.touch-screen .random_btn:hover,\n.touch-screen .prev_btn:hover,\n.touch-screen .next_btn:hover,\n.touch-screen .repeat_btn:hover {\n  color: #fff;\n}\n\n.touch-screen .play_btn:hover {\n  background-color: #fff;\n}\n\n.player .pl-list__eq {\n\tdisplay: none;\n}\n\n.player .pl-list--current {\n\tbackground: #1ec279;\n\tcolor: #fff;\n}\n\n.player .pl-list--current .pl-list__eq {\n\tdisplay: block;\n}\n\n@keyframes eq {\n\t0% {\n\t\theight: 3px;\n\t}\n\n\t50% {\n\t\theight: 15px;\n\t}\n\n\t100% {\n\t\theight: 3px;\n\t}\n}\n\n.player .eq {\n\tdisplay: flex;\n\twidth: 20px;\n\theight: 15px;\n\tmargin: 0 auto;\n\tjustify-content: space-between;\n\talign-items: flex-end;\n}\n\n.player .eq__bar {\n\twidth: 4px;\n\tbackground: #fff;\n\tfilter: drop-shadow(0 0 5px #fff);\n}\n\n.player .eq__bar:nth-child(2) {\n\tanimation: eq 1.2s ease-in-out infinite 0s;\n}\n\n.player .eq__bar:nth-child(4) {\n\tanimation: eq 1.2s ease-in-out infinite .2s;\n}\n\n.player .eq__bar:nth-child(1) {\n\tanimation: eq 1.2s ease-in-out infinite .4s;\n}\n\n.player .eq__bar:nth-child(3) {\n\tanimation: eq 1.2s ease-in-out infinite .6s;\n}<\/pre>\n\n\n\n
Here’s the explanation for the above code:-<\/strong><\/p>\n\n\n\n
The Above CSS Code for Music Player defines global styles for the entire HTML document, setting the font, size, background color, and other properties.<\/p>\n\n\n\n
CSS is being used to style the music player interface, including its body, content, header, playlist, and buttons. Also, you can modify it as per your interface and requirements.<\/p>\n\n\n\n
It also includes various control buttons such as play, previous, next, repeat, and random. <\/p>\n\n\n\n
Login and Registration Form Using HTML CSS JavaScript<\/a><\/p>\n\n\n\n
CSS Code Output For Music Player<\/h2>\n\n\n\n
\"Music<\/figure>\n\n\n\n
Step 3: JavaScript Code for Music Player Code<\/h2>\n\n\n\n
Create another file in the same folder name as script.js and paste the following code:-<\/p>\n\n\n\n
$(window).on('load', function() { \/\/ makes sure the whole site is loaded \n  $('#status').fadeOut(); \/\/ will first fade out the loading animation \n  $('#preloader').delay(500).fadeOut('slow'); \/\/ will fade out the white DIV that covers the website. \n  checkTouchScreen();\n})\n\n$(document).ready(function() {\n  (function(window, undefined) {\n\n    'use strict';\n\n    var AudioPlayer = (function() {\n\n      \/\/ Player vars!\n      var\n        docTitle = document.title,\n        player = document.getElementById('ap'),\n        playBtn,\n        \/\/ playSvg,\n        \/\/ playSvgPath,\n        prevBtn,\n        nextBtn,\n        \/\/ plBtn,\n        repeatBtn,\n        \/\/ volumeBtn,\n        progressBar,\n        preloadBar,\n        curTime,\n        durTime,\n        trackTitle,\n        audio,\n        index = 0,\n        playList,\n        volumeBar,\n        wheelVolumeValue = 0,\n        volumeLength,\n        repeating = false,\n        seeking = false,\n        rightClick = false,\n        apActive = false,\n        \/\/ playlist vars\n        plPlaylist = document.getElementById('navMenu'),\n        pl,\n        plUl,\n        plLi,\n        tplList =\n        '<li class=\"player_playlist_item pl-list\" data-track=\"{count}\">' +\n          '<div class=\"pl-list__track\">' +\n            '<div class=\"pl-list__icon\"><\/div>' +\n            '<div class=\"pl-list__eq\">' +\n              '<div class=\"eq\">' +\n                '<div class=\"eq__bar\"><\/div>' +\n                '<div class=\"eq__bar\"><\/div>' +\n                '<div class=\"eq__bar\"><\/div>' +\n                '<div class=\"eq__bar\"><\/div>' +\n              '<\/div>' +\n            '<\/div>' +\n          '<\/div>' +\n          '<div class=\"song_block pl-list__title\">{title}<\/div>' +\n        '<\/li>',\n        \/\/ settings\n        settings = {\n          volume: 1,\n          changeDocTitle: true,\n          confirmClose: true,\n          autoPlay: false,\n          buffered: true,\n          notification: true,\n          playList: []\n        };\n\n      function init(options) {\n\n        if (!('classList' in document.documentElement)) {\n          return false;\n        }\n\n        if (apActive || player === null) {\n          return 'Player already init';\n        }\n\n        settings = extend(settings, options);\n\n        \/\/ get player elements\n        playBtn = player.querySelector('.play_btn');\n        \/\/ playSvg = playBtn.querySelector('.glyphicon-play');\n        \/\/ playSvgPath = playSvg.querySelector('path');\n        prevBtn = player.querySelector('.prev_btn');\n        nextBtn = player.querySelector('.next_btn');\n        repeatBtn = player.querySelector('.repeat_btn');\n        curTime = player.querySelector('.time_played');\n        durTime = player.querySelector('.full_time');\n        trackTitle = player.querySelector('.song_playing');\n        progressBar = player.querySelector('.line_played');\n        preloadBar = player.querySelector('.line_preload');\n\n        playList = settings.playList;\n\n        playBtn.addEventListener('click', playToggle, false);\n        repeatBtn.addEventListener('click', repeatToggle, false);\n\n        progressBar.closest('.progress-bar-wrapper').addEventListener('mousedown', handlerBar, false);\n        progressBar.closest('.progress-bar-wrapper').addEventListener('mousemove', seek, false);\n\n        document.documentElement.addEventListener('mouseup', seekingFalse, false);\n\n        \/\/ volumeBar.closest('.volume').addEventListener('mousedown', handlerVol, false);\n        \/\/ volumeBar.closest('.volume').addEventListener('mousemove', setVolume);\n        \/\/ volumeBar.closest('.volume').addEventListener(wheel(), setVolume, false);\n\n        \/\/ document.documentElement.addEventListener('mouseup', seekingFalse, false);\n\n        prevBtn.addEventListener('click', prev, false);\n        nextBtn.addEventListener('click', next, false);\n\n        apActive = true;\n\n        \/\/ Create playlist\n        renderPL();\n\n        \/\/ Create audio object\n        audio = new Audio();\n        audio.volume = settings.volume;\n        audio.preload = 'auto';\n\n        audio.addEventListener('error', errorHandler, false);\n        audio.addEventListener('timeupdate', timeUpdate, false);\n        audio.addEventListener('ended', doEnd, false);\n\n        \/\/ volumeBar.style.height = audio.volume * 100 + '%';\n        \/\/ volumeLength = volumeBar.css('height');\n\n        if (settings.confirmClose) {\n          window.addEventListener(\"beforeunload\", beforeUnload, false);\n        }\n\n        if (isEmptyList()) {\n          return false;\n        }\n        audio.src = playList[index].file;\n        trackTitle.innerHTML = playList[index].title;\n\n        if (settings.autoPlay) {\n          audio.play();\n          \/\/ playBtn.classList.add('is-playing');\n          $('#play_circle').removeClass('glyphicon-play').addClass('glyphicon-pause');\n          $('#npAction').text(function(i, text) {\n            if (text === \"PAUSED...\") {\n              return \"NOW PLAYING\";\n            }})\n          plLi[index].classList.add('pl-list--current');\n          notify(playList[index].title, {\n            icon: playList[index].icon,\n            body: 'Now playing'\n          });\n        }\n      }\n\n      function changeDocumentTitle(title) {\n        if (settings.changeDocTitle) {\n          if (title) {\n            document.title = title;\n          } else {\n            document.title = docTitle;\n          }\n        }\n      }\n\n      function beforeUnload(evt) {\n        if (!audio.paused) {\n          var message = 'Music still playing';\n          evt.returnValue = message;\n          return message;\n        }\n      }\n\n      function errorHandler(evt) {\n        if (isEmptyList()) {\n          return;\n        }\n        var mediaError = {\n          '1': 'MEDIA_ERR_ABORTED',\n          '2': 'MEDIA_ERR_NETWORK',\n          '3': 'MEDIA_ERR_DECODE',\n          '4': 'MEDIA_ERR_SRC_NOT_SUPPORTED'\n        };\n        audio.pause();\n        curTime.innerHTML = '--';\n        durTime.innerHTML = '--';\n        progressBar.style.width = 0;\n        preloadBar.style.width = 0;\n        \/\/ playBtn.classList.remove('is-playing');\n        $('#play_circle').addClass('glyphicon-play').removeClass('glyphicon-pause');\n        $('#npAction').text(function(i, text) {\n          if (text === \"NOW PLAYING\") {\n            return \"PAUSED...\";\n          }\n        })\n        \/\/ playSvgPath.setAttribute('d', playSvg.getAttribute('data-play'));\n        plLi[index] && plLi[index].classList.remove('pl-list--current');\n        changeDocumentTitle();\n        throw new Error('Houston we have a problem: ' + mediaError[evt.target.error.code]);\n      }\n\n      \/**\n       * UPDATE PL\n       *\/\n      function updatePL(addList) {\n        if (!apActive) {\n          return 'Player is not yet initialized';\n        }\n        if (!Array.isArray(addList)) {\n          return;\n        }\n        if (addList.length === 0) {\n          return;\n        }\n\n        var count = playList.length;\n        var html = [];\n        playList.push.apply(playList, addList);\n        addList.forEach(function(item) {\n          html.push(\n            tplList.replace('{count}', count++).replace('{title}', item.title)\n          );\n        });\n        \/\/ If exist empty message\n        if (plUl.querySelector('.pl-list--empty')) {\n          plUl.removeChild(pl.querySelector('.pl-list--empty'));\n          audio.src = playList[index].file;\n          trackTitle.innerHTML = playList[index].title;\n        }\n        \/\/ Add song into playlist\n        plUl.insertAdjacentHTML('beforeEnd', html.join(''));\n        plLi = pl.querySelectorAll('li');\n      }\n      \n\n      \/**\n       *  PlayList methods\n       *\/\n      function renderPL() {\n        var html = [];\n\n        playList.forEach(function(item, i) {\n          html.push(\n            tplList.replace('{count}', i).replace('{title}', item.title)\n          );\n        });\n\n        pl = create('div', {\n          'className': 'player_playlist',\n          'id': 'pl',\n          'innerHTML': '<ul class=\"pl-ul\">' + (!isEmptyList() ? html.join('') : '<li class=\"pl-list--empty\">PlayList is empty<\/li>') + '<\/ul>'\n        });\n        \n        plPlaylist.parentNode.insertBefore(pl, plPlaylist.nextSibling);\n\n        plUl = pl.querySelector('.pl-ul');\n        plLi = plUl.querySelectorAll('li');\n\n        pl.addEventListener('click', listHandler, false);\n      }\n\n      function listHandler(evt) {\n        evt.preventDefault();\n\n        if (evt.target.matches('.pl-list__title') || evt.target.matches('.pl-list__track') || evt.target.matches('.pl-list__icon') || evt.target.matches('.pl-list__eq') || evt.target.matches('.eq')) {\n          var current = parseInt(evt.target.closest('.pl-list').getAttribute('data-track'), 10);\n          if (index !== current) {\n            index = current;\n            play(current);\n          } else {\n            playToggle();\n          }\n        } else {\n          if (!!evt.target.closest('.pl-list__remove')) {\n            var parentEl = evt.target.closest('.pl-list');\n            var isDel = parseInt(parentEl.getAttribute('data-track'), 10);\n\n            playList.splice(isDel, 1);\n            parentEl.closest('.pl-ul').removeChild(parentEl);\n\n            plLi = pl.querySelectorAll('li');\n\n            [].forEach.call(plLi, function(el, i) {\n              el.setAttribute('data-track', i);\n            });\n\n            if (!audio.paused) {\n\n              if (isDel === index) {\n                play(index);\n              }\n\n            } else {\n              if (isEmptyList()) {\n                clearAll();\n              } else {\n                if (isDel === index) {\n                  if (isDel > playList.length - 1) {\n                    index -= 1;\n                  }\n                  audio.src = playList[index].file;\n                  trackTitle.innerHTML = playList[index].title;\n                  progressBar.style.width = 0;\n                }\n              }\n            }\n            if (isDel < index) {\n              index--;\n            }\n          }\n        }\n      }\n\n      function plActive() {\n        if (audio.paused) {\n          plLi[index].classList.remove('pl-list--current');\n          return;\n        }\n        var current = index;\n        for (var i = 0, len = plLi.length; len > i; i++) {\n          plLi[i].classList.remove('pl-list--current');\n        }\n        plLi[current].classList.add('pl-list--current');\n      }\n\n      \/**\n       * Player methods\n       *\/\n      function play(currentIndex) {\n\n        if (isEmptyList()) {\n          return clearAll();\n        }\n\n        index = (currentIndex + playList.length) % playList.length;\n\n        audio.src = playList[index].file;\n        trackTitle.innerHTML = playList[index].title;\n\n        \/\/ Change document title\n        changeDocumentTitle(playList[index].title);\n\n        \/\/ Audio play\n        audio.play();\n\n        \/\/ Show notification\n        notify(playList[index].title, {\n          icon: playList[index].icon,\n          body: 'Now playing',\n          tag: 'music-player'\n        });\n\n        \/\/ Toggle play button\n        playBtn.classList.add('is-playing');\n        playSvgPath.setAttribute('d', playSvg.getAttribute('data-pause'));\n\n        \/\/ Set active song playlist\n        plActive();\n      }\n\n      function prev() {\n        play(index - 1);\n      }\n\n      function next() {\n        play(index + 1);\n      }\n\n      function isEmptyList() {\n        return playList.length === 0;\n      }\n\n      function clearAll() {\n        audio.pause();\n        audio.src = '';\n        trackTitle.innerHTML = 'queue is empty';\n        curTime.innerHTML = '--';\n        durTime.innerHTML = '--';\n        progressBar.style.width = 0;\n        preloadBar.style.width = 0;\n        playBtn.classList.remove('is-playing');\n        playSvgPath.setAttribute('d', playSvg.getAttribute('data-play'));\n        if (!plUl.querySelector('.pl-list--empty')) {\n          plUl.innerHTML = '<li class=\"pl-list--empty\">PlayList is empty<\/li>';\n        }\n        changeDocumentTitle();\n      }\n\n      function playToggle() {\n        if (isEmptyList()) {\n          return;\n        }\n        if (audio.paused) {\n\n          if (audio.currentTime === 0) {\n            notify(playList[index].title, {\n              icon: playList[index].icon,\n              body: 'Now playing'\n            });\n          }\n          changeDocumentTitle(playList[index].title);\n\n          audio.play();\n\n          playBtn.classList.add('is-playing');\n          playSvgPath.setAttribute('d', playSvg.getAttribute('data-pause'));\n        } else {\n          changeDocumentTitle();\n          audio.pause();\n          playBtn.classList.remove('is-playing');\n          playSvgPath.setAttribute('d', playSvg.getAttribute('data-play'));\n        }\n        plActive();\n      }\n\n      function volumeToggle() {\n        if (audio.muted) {\n          if (parseInt(volumeLength, 10) === 0) {\n            volumeBar.style.height = settings.volume * 100 + '%';\n            audio.volume = settings.volume;\n          } else {\n            volumeBar.style.height = volumeLength;\n          }\n          audio.muted = false;\n          volumeBtn.classList.remove('has-muted');\n        } else {\n          audio.muted = true;\n          volumeBar.style.height = 0;\n          volumeBtn.classList.add('has-muted');\n        }\n      }\n\n      function repeatToggle() {\n        if (repeatBtn.classList.contains('is-active')) {\n          repeating = false;\n          repeatBtn.classList.remove('is-active');\n        } else {\n          repeating = true;\n          repeatBtn.classList.add('is-active');\n        }\n      }\n\n      function plToggle() {\n        plBtn.classList.toggle('is-active');\n        pl.classList.toggle('h-show');\n      }\n\n      function timeUpdate() {\n        if (audio.readyState === 0) return;\n\n        var barlength = Math.round(audio.currentTime * (100 \/ audio.duration));\n        progressBar.style.width = barlength + '%';\n\n        var\n          curMins = Math.floor(audio.currentTime \/ 60),\n          curSecs = Math.floor(audio.currentTime - curMins * 60),\n          mins = Math.floor(audio.duration \/ 60),\n          secs = Math.floor(audio.duration - mins * 60);\n        (curSecs < 10) && (curSecs = '0' + curSecs);\n        (secs < 10) && (secs = '0' + secs);\n\n        curTime.innerHTML = curMins + ':' + curSecs;\n        durTime.innerHTML = mins + ':' + secs;\n\n        if (settings.buffered) {\n          var buffered = audio.buffered;\n          if (buffered.length) {\n            var loaded = Math.round(100 * buffered.end(0) \/ audio.duration);\n            preloadBar.style.width = loaded + '%';\n          }\n        }\n      }\n\n      \/**\n       * TODO shuffle\n       *\/\n      function shuffle() {\n        if (shuffle) {\n          index = Math.round(Math.random() * playList.length);\n        }\n      }\n\n      function doEnd() {\n        if (index === playList.length - 1) {\n          if (!repeating) {\n            audio.pause();\n            plActive();\n            playBtn.classList.remove('is-playing');\n            playSvgPath.setAttribute('d', playSvg.getAttribute('data-play'));\n            return;\n          } else {\n            play(0);\n          }\n        } else {\n          play(index + 1);\n        }\n      }\n\n      function moveBar(evt, el, dir) {\n        var value;\n        if (dir === 'horizontal') {\n          value = Math.round(((evt.clientX - el.offset().left) + window.pageXOffset) * 100 \/ el.parentNode.offsetWidth);\n          el.style.width = value + '%';\n          return value;\n        } else {\n          if (evt.type === wheel()) {\n            value = parseInt(volumeLength, 10);\n            var delta = evt.deltaY || evt.detail || -evt.wheelDelta;\n            value = (delta > 0) ? value - 10 : value + 10;\n          } else {\n            var offset = (el.offset().top + el.offsetHeight) - window.pageYOffset;\n            value = Math.round((offset - evt.clientY));\n          }\n          if (value > 100) value = wheelVolumeValue = 100;\n          if (value < 0) value = wheelVolumeValue = 0;\n          volumeBar.style.height = value + '%';\n          return value;\n        }\n      }\n\n      function handlerBar(evt) {\n        rightClick = (evt.which === 3) ? true : false;\n        seeking = true;\n        seek(evt);\n      }\n\n      function handlerVol(evt) {\n        rightClick = (evt.which === 3) ? true : false;\n        seeking = true;\n        setVolume(evt);\n      }\n\n      function seek(evt) {\n        if (seeking && rightClick === false && audio.readyState !== 0) {\n          var value = moveBar(evt, progressBar, 'horizontal');\n          audio.currentTime = audio.duration * (value \/ 100);\n        }\n      }\n\n      function seekingFalse() {\n        seeking = false;\n      }\n\n      function setVolume(evt) {\n        evt.preventDefault();\n        volumeLength = volumeBar.css('height');\n        if (seeking && rightClick === false || evt.type === wheel()) {\n          var value = moveBar(evt, volumeBar.parentNode, 'vertical') \/ 100;\n          if (value <= 0) {\n            audio.volume = 0;\n            audio.muted = true;\n            volumeBtn.classList.add('has-muted');\n          } else {\n            if (audio.muted) audio.muted = false;\n            audio.volume = value;\n            volumeBtn.classList.remove('has-muted');\n          }\n        }\n      }\n\n      function notify(title, attr) {\n        if (!settings.notification) {\n          return;\n        }\n        if (window.Notification === undefined) {\n          return;\n        }\n        attr.tag = 'AP music player';\n        window.Notification.requestPermission(function(access) {\n          if (access === 'granted') {\n            var notice = new Notification(title.substr(0, 110), attr);\n            setTimeout(notice.close.bind(notice), 5000);\n          }\n        });\n      }\n\n      \/* Destroy method. Clear All *\/\n      function destroy() {\n        if (!apActive) return;\n\n        if (settings.confirmClose) {\n          window.removeEventListener('beforeunload', beforeUnload, false);\n        }\n\n        playBtn.removeEventListener('click', playToggle, false);\n        volumeBtn.removeEventListener('click', volumeToggle, false);\n        repeatBtn.removeEventListener('click', repeatToggle, false);\n        plBtn.removeEventListener('click', plToggle, false);\n\n        progressBar.closest('.progress-container').removeEventListener('mousedown', handlerBar, false);\n        progressBar.closest('.progress-container').removeEventListener('mousemove', seek, false);\n        document.documentElement.removeEventListener('mouseup', seekingFalse, false);\n\n        volumeBar.closest('.volume').removeEventListener('mousedown', handlerVol, false);\n        volumeBar.closest('.volume').removeEventListener('mousemove', setVolume);\n        volumeBar.closest('.volume').removeEventListener(wheel(), setVolume);\n        document.documentElement.removeEventListener('mouseup', seekingFalse, false);\n\n        prevBtn.removeEventListener('click', prev, false);\n        nextBtn.removeEventListener('click', next, false);\n\n        audio.removeEventListener('error', errorHandler, false);\n        audio.removeEventListener('timeupdate', timeUpdate, false);\n        audio.removeEventListener('ended', doEnd, false);\n\n        \/\/ Playlist\n        pl.removeEventListener('click', listHandler, false);\n        pl.parentNode.removeChild(pl);\n\n        audio.pause();\n        apActive = false;\n        index = 0;\n\n        playBtn.classList.remove('is-playing');\n        \/\/ playSvgPath.setAttribute('d', playSvg.getAttribute('data-play'));\n        \/\/ volumeBtn.classList.remove('has-muted');\n        \/\/ plBtn.classList.remove('is-active');\n        repeatBtn.classList.remove('is-active');\n\n        \/\/ Remove player from the DOM if necessary\n        \/\/ player.parentNode.removeChild(player);\n      }\n\n      \/**\n       *  Helpers\n       *\/\n      function wheel() {\n        var wheel;\n        if ('onwheel' in document) {\n          wheel = 'wheel';\n        } else if ('onmousewheel' in document) {\n          wheel = 'mousewheel';\n        } else {\n          wheel = 'MozMousePixelScroll';\n        }\n        return wheel;\n      }\n\n      function extend(defaults, options) {\n        for (var name in options) {\n          if (defaults.hasOwnProperty(name)) {\n            defaults[name] = options[name];\n          }\n        }\n        return defaults;\n      }\n\n      function create(el, attr) {\n        var element = document.createElement(el);\n        if (attr) {\n          for (var name in attr) {\n            if (element[name] !== undefined) {\n              element[name] = attr[name];\n            }\n          }\n        }\n        return element;\n      }\n\n      function getTrack(index) {\n        return playList[index];\n      }\n\n      Element.prototype.offset = function() {\n        var el = this.getBoundingClientRect(),\n          scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,\n          scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n\n        return {\n          top: el.top + scrollTop,\n          left: el.left + scrollLeft\n        };\n      };\n\n      Element.prototype.css = function(attr) {\n        if (typeof attr === 'string') {\n          return getComputedStyle(this, '')[attr];\n        } else if (typeof attr === 'object') {\n          for (var name in attr) {\n            if (this.style[name] !== undefined) {\n              this.style[name] = attr[name];\n            }\n          }\n        }\n      };\n\n      \/\/ matches polyfill\n      window.Element && function(ElementPrototype) {\n        ElementPrototype.matches = ElementPrototype.matches ||\n          ElementPrototype.matchesSelector ||\n          ElementPrototype.webkitMatchesSelector ||\n          ElementPrototype.msMatchesSelector ||\n          function(selector) {\n            var node = this,\n              nodes = (node.parentNode || node.document).querySelectorAll(selector),\n              i = -1;\n            while (nodes[++i] && nodes[i] != node);\n            return !!nodes[i];\n          };\n      }(Element.prototype);\n\n      \/\/ closest polyfill\n      window.Element && function(ElementPrototype) {\n        ElementPrototype.closest = ElementPrototype.closest ||\n          function(selector) {\n            var el = this;\n            while (el.matches && !el.matches(selector)) el = el.parentNode;\n            return el.matches ? el : null;\n          };\n      }(Element.prototype);\n\n      \/**\n       *  Public methods\n       *\/\n      return {\n        init: init,\n        update: updatePL,\n        destroy: destroy,\n        getTrack: getTrack\n      };\n\n    })();\n\n    window.AP = AudioPlayer;\n    \n    \n\n  })(window);\n\n  \/\/ TEST: image for web notifications\n  var iconImage = 'http:\/\/funkyimg.com\/i\/21pX5.png';\n\n  AP.init({\n    playList: [{\n      'icon': iconImage,\n      'title': 'Hitman',\n      'file': 'http:\/\/incompetech.com\/music\/royalty-free\/mp3-royaltyfree\/Hitman.mp3'\n    }, {\n      'icon': iconImage,\n      'title': 'Forever Believe',\n      'file': 'https:\/\/a.clyp.it\/zbh0qeyo.mp3'\n    }, {\n      'icon': iconImage,\n      'title': 'Drifting',\n      'file': 'https:\/\/a.clyp.it\/bthbgqcs.mp3'\n    }, {\n      'icon': iconImage,\n      'title': 'Clap Along (Lorem ipsum dolor sit amet, consectetur adipisicing.)',\n      'file': 'https:\/\/a.clyp.it\/lygki3hx.mp3'\n    }, {\n      'icon': iconImage,\n      'title': 'Pop Tune',\n      'file': 'https:\/\/a.clyp.it\/enddsv44.mp3'\n    }]\n  });\n\n\n  $(document).ready(function() {\n    $(\".pl-list__download\").on(\"click\", function() {\n      var trackPlaying = $(this).closest(\".pl-list\");\n      console.log(AP.getTrack(trackPlaying.attr(\"data-track\")));\n    });\n  });\n\n  (function() {\n    $('.back_btn').on('click', function() {\n      $('.player_playlist').toggleClass('playlist_on');\n      $('.glyphicon-menu-left').toggleClass('back_btn_on');\n      $('.waves').toggleClass('waves_up');\n      $('.album_wrap').toggleClass('album_up');\n      $('.song_playing').toggleClass('song_playing_up');\n      $('.timeline_wrap').toggleClass('timeline_wrap_up');\n      $('.player_btns').toggleClass('player_btns_up');\n      $('.line_played').toggleClass('line_played_up');\n      $('.full_line').toggleClass('full_line_up');\n      $('.time_of_song').toggleClass('time_of_song_up');\n      $('.progress-bar-pointer').toggleClass('progress-bar-pointer_up');\n      $('.line_preload').toggleClass('line_preload_up');\n    })\n  })();\n\n  (function() {\n    $('.hamburger-menu').on('click', function() {\n      $('.bar').toggleClass('animate');\n      $('.hamburger-menu').toggleClass('slide');\n      $('.back_btn').toggleClass('slide');\n      $('.nav_menu').toggleClass('open');\n      $('.player_fade').toggleClass('player_fade_on');\n    })\n  })();\n\n  (function() {\n    $('.play_btn').on('click', function() {\n      $('#play_circle').toggleClass('glyphicon-play').toggleClass('glyphicon-pause');\n      $('#npAction').text(function(i, text) {\n        return text === \"PAUSED...\" ? \"NOW PLAYING\" : \"PAUSED...\";\n      })\n    })\n  })();\n\n  (function() {\n    $('.random_btn').on('click', function() {\n      $('.random_btn').toggleClass('random_btn_on');\n    })\n  })();\n\n  (function() {\n    $('.repeat_btn').on('click', function() {\n      $('.repeat_btn').toggleClass('repeat_btn_on');\n\n    })\n  })();\n\n  \/\/ \u043e\u0442\u043c\u0435\u043d\u0438\u0442\u044c \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0442\u0435\u043a\u0441\u0442\u0430\n  function preventSelection(element) {\n    var preventSelection = false;\n\n    function addHandler(element, event, handler) {\n      if (element.attachEvent)\n        element.attachEvent('on' + event, handler);\n      else\n      if (element.addEventListener)\n        element.addEventListener(event, handler, false);\n    }\n\n    function removeSelection() {\n      if (window.getSelection) {\n        window.getSelection().removeAllRanges();\n      } else if (document.selection && document.selection.clear)\n        document.selection.clear();\n    }\n\n    function killCtrlA(event) {\n      var event = event || window.event;\n      var sender = event.target || event.srcElement;\n      if (sender.tagName.match(\/INPUT|TEXTAREA\/i))\n        return;\n      var key = event.keyCode || event.which;\n      if (event.ctrlKey && key == 'A'.charCodeAt(0)) \/\/ 'A'.charCodeAt(0) \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u043d\u0430 65\n      {\n        removeSelection();\n        if (event.preventDefault)\n          event.preventDefault();\n        else\n          event.returnValue = false;\n      }\n    }\n    \/\/ \u043d\u0435 \u0434\u0430\u0435\u043c \u0432\u044b\u0434\u0435\u043b\u044f\u0442\u044c \u0442\u0435\u043a\u0441\u0442 \u043c\u044b\u0448\u043a\u043e\u0439\n    addHandler(element, 'mousemove', function() {\n      if (preventSelection)\n        removeSelection();\n    });\n    addHandler(element, 'mousedown', function(event) {\n      var event = event || window.event;\n      var sender = event.target || event.srcElement;\n      preventSelection = !sender.tagName.match(\/INPUT|TEXTAREA\/i);\n    });\n    \/\/ \u0431\u043e\u0440\u0435\u043c dblclick\n    \/\/ \u0435\u0441\u043b\u0438 \u0432\u0435\u0448\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043d\u0435 \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 dblclick, \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c\n    \/\/ \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0435 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0442\u0435\u043a\u0441\u0442\u0430 \u0432 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445\n    addHandler(element, 'mouseup', function() {\n      if (preventSelection)\n        removeSelection();\n      preventSelection = false;\n    });\n    \/\/ \u0431\u043e\u0440\u0435\u043c ctrl+A\n    \/\/ \u0441\u043a\u043e\u0440\u0435\u0439 \u0432\u0441\u0435\u0433\u043e \u044d\u0442\u043e \u0438 \u043d\u0435 \u043d\u0430\u0434\u043e, \u043a \u0442\u043e\u043c\u0443 \u0436\u0435 \u0435\u0441\u0442\u044c \u043f\u043e\u0434\u043e\u0437\u0440\u0435\u043d\u0438\u0435\n    \/\/ \u0447\u0442\u043e \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u0441\u0435 \u0436\u0435 \u0442\u0430\u043a\u043e\u0439 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043d\u0443\u0436\u043d\u043e \n    \/\/ \u0432\u0435\u0448\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u0438 \u043d\u0430 document, \u0430 \u043d\u0435 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\n    addHandler(element, 'keydown', killCtrlA);\n    addHandler(element, 'keyup', killCtrlA);\n  }\n  preventSelection(document);\n});\n\nfunction checkTouchScreen() {\n  if (\/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini\/i.test(navigator.userAgent)) {\n    $('body').addClass('touch-screen');\n    return true;\n  } else {\n    $('body').removeClass('touch-screen');\n    return false;\n  }\n}\n\/\/https:\/\/codepen.io\/MichaelMammoliti\/pen\/VYEWZg<\/pre>\n\n\n\n
Here’s the explanation of the above code for the music player:-<\/strong><\/p>\n\n\n\n
The above Javascript code for the music player initialized the Audio player using the audio player module. It also handles events such as play, pause, next, previous, and repeat. JavaScript code performs many functionalities like Handling the different Events.<\/p>\n\n\n\n
The JavaScript responds to events like clicking on play, repeat, next, and previous buttons.<\/p>\n\n\n\n
How to create a stopwatch using HTML,CSS  and JavaScript<\/a><\/p>\n\n\n\n
Final Output for Music Player<\/h2>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
Congratulations!!! you have just completed Another big project in JavaScript a Music Player for your portfolio that you can use on your next website or also you can add to your resume. This is completely beginner-friendly code. Further, you can modify this as per your needs and ideas. You must do the experiments by adding hovering effects and transition effects and make it more impressive. Add more controls and features to your Music Player. Also for more such mini projects keep visiting our platform. You can also read about gradient, transition, effects, and shadow effects for interactive in CSS from here<\/a>.<\/p>\n\n\n\n
Resources<\/h2>\n\n\n\n
Learn More About the JavaScript From here<\/a><\/p>\n\n\n\n
Source Code<\/a><\/p>\n\n\n\n
Credit:- Shreya Suman<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Introduction Hello Coder! Welcome To the foolishdeveloper Blog. In This Blog, We Learn How To Build a Music Player using HTML, CSS, and JavaScript. This tutorial is going to be completely beginner-friendly. We all know that managing code is important while building a project so that it will be easy for the user to use […]<\/p>\n","protected":false},"author":8,"featured_media":6693,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","ocean_post_oembed":"","ocean_post_self_hosted_media":"","ocean_post_video_embed":"","ocean_link_format":"","ocean_link_format_target":"self","ocean_quote_format":"","ocean_quote_format_link":"post","ocean_gallery_link_images":"on","ocean_gallery_id":[],"footnotes":""},"categories":[490,32],"tags":[481,523],"class_list":["post-6636","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-project","category-javascript-music-player","tag-javascript-projects","tag-music-player-javascript","entry","has-media"],"_links":{"self":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/6636","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/comments?post=6636"}],"version-history":[{"count":9,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/6636\/revisions"}],"predecessor-version":[{"id":6694,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/6636\/revisions\/6694"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/media\/6693"}],"wp:attachment":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/media?parent=6636"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/categories?post=6636"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/tags?post=6636"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}