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 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.
30+ Javascript Projects with Source Code
Preview of Music Player
Music Player Demo
What is a Music player?
A music player is a tool that is used to play audio music in formats like MP3, WAV, etc. When listening to songs, a music player is useful. We regularly listen to music on a music player. Spotify, Google Music, and other popular music streaming services are some examples of music players. On this blog, we’ll be developing a custom music player. Best of luck!
Step 1: HTML Code for Music Player
Create a file with the name of the index.html and paste the following code:-
<div class="player" id="ap">
<audio></audio>
<div class="player_body">
<div class="hamburger-menu">
<div class="bar"></div>
</div>
<div class="nav_menu" id="navMenu">
<div class="nav_list">
<div class="nav_item">
<p>Developed by:</p>
<a href="https://www.linkedin.com/in/vladislav-kubyshkin-b15b18128" target="_blank">Vladislav Kubyshkin</a>
</div>
<div class="nav_item">
<p>Template designed by:</p>
<a href="https://dribbble.com/rezashintia" target="_blank">Reza Shintia Dewi</a>
</div>
</div>
</div>
<!-- <div class="player_playlist" id="pl_playlist">
<ul class="player_playlist_list jAudio--playlist">
<div class="player_playlist_item">
<div class="song_block">
<h6>Song name</h6>
<p>Song artist</p>
</div>
<div class="song_time">
<div>0:00</div>
</div>
</div>
</ul>
</div> -->
<div class="player_fade"></div>
<div class="player_content">
<div class="player_header">
<div class="container-fluid">
<div class="row">
<div class="col-xs-2">
<div class="back_btn"><span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span></div>
</div>
<div class="col-xs-8">
<div class="header_name text-center" id="nowPlay">
<span id="npAction">PAUSED...</span>
</div>
</div>
</div>
</div>
</div>
<div class="album_wrap">
<div class="no_album_img"><div class="jAudio--thumb"></div></div>
</div>
<div class="song_playing text-center">
<!-- <div class="song_name"><span id="npName">Hi Dribbble!</span></div>
<div class="artist_name"><span id="npArtist">Reza Shintia Dewi</span></div> -->
</div>
<div class="timeline_wrap">
<!-- <div class="timeline">
<div class="line_played"></div>
<div class="full_line"></div>
</div> -->
<div class='timeline progress-bar-wrapper'>
<div class='full_line'></div>
<div class="line_preload"></div>
<div class='line_played'>
<span class='progress-bar-pointer'></span>
</div>
</div>
<div class="time_of_song">
<div class="container-fluid">
<div class="row">
<div class="col-xs-2">
<span class="time_played">00:00</span>
</div>
<div class="col-xs-2 col-xs-offset-8">
<span class="full_time">00:00</span>
</div>
</div>
</div>
</div>
</div>
<div class="player_btns">
<div class="container-fluid">
<div class="row">
<div class="col-xs-2">
<div class="random_btn text-center" id="random"><span class="glyphicon glyphicon-random" aria-hidden="true"></span></div>
</div>
<div class="col-xs-2">
<div class="prev_btn text-center" id="btnPrev" data-action='prev'><span class="glyphicon glyphicon-backward" aria-hidden="true"></span></div>
</div>
<div class="col-xs-3">
<div class="play_btn text-center" id="play" data-action='play'>
<span class="glyphicon glyphicon-play" id="play_circle" aria-hidden="true"></span>
</div>
</div>
<div class="col-xs-2">
<div class="next_btn text-center" id="btnNext" data-action='next'><span class="glyphicon glyphicon-forward" aria-hidden="true"></span></div>
</div>
<div class="col-xs-2">
<div class="repeat_btn text-center" id="repeat"><span class="glyphicon glyphicon-retweet" aria-hidden="true"></span></div>
</div>
</div>
</div>
</div>
</div>
<div class="waves">
<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">
<style type="text/css">
.st0{fill:url(#SVGID_1_);}
.st1{fill:url(#SVGID_2_);}
.st2{fill:url(#SVGID_3_);}
</style>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="137.5" y1="-19.8534" x2="137.5" y2="92.9036">
<stop offset="0.104" style="stop-color:#FF8FCF;stop-opacity:0"/>
<stop offset="1" style="stop-color:#FF8FCF;stop-opacity:0.7"/>
</linearGradient>
<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
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
v172h275v-158C270.3,67.9,265,70,258.3,68z"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="137.5" y1="26.8924" x2="137.5" y2="179.8649">
<stop offset="0" style="stop-color:#33D4FA;stop-opacity:0"/>
<stop offset="1" style="stop-color:#33D4FA;stop-opacity:0.7"/>
</linearGradient>
<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
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
C271.7,90.5,267.5,93.7,261.8,94.7z"/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="137.5" y1="6.0051" x2="137.5" y2="144.9296">
<stop offset="3.960396e-02" style="stop-color:#33D4FA;stop-opacity:0"/>
<stop offset="1" style="stop-color:#00B2FA"/>
</linearGradient>
<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
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
C12.3,70.5,11.7,74.4,8,79c-2.7,3.4-5.8,5.4-8,6.7v138H275z"/>
</svg>
</div>
</div>
</div>
<div id="preloader">
<div id="status">
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
</div>Here’s the explanation for the above code:-
Audio Player Container: The container we have created inside the div has a class of “player” and an ID of “ap,”
Audio Element: This element will be used to hold the audio source.
Player Body: 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.
Navigation Menu: This menu is enclosed within the <div> with the class name “nav_menu” and an ID of “navMenu.”
Drawing App using HTML, CSS, and JavaScript (Free Code)
HTML Output For Music Player
Step 2: CSS Code For Music Player
Create another file name as “index.css” and paste the following code:-
body,
html {
font-family: 'Roboto', sans-serif;
font-size: 15px;
position: relative;
z-index: 0;
width: 100%;
height: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: rgba(215, 243, 246, 1);
text-shadow: 1px 1px 1px rgba(0, 0, 0, .004);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-khtml-user-select: none;
}
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 178, 250, 1);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
z-index: 500;
/* makes sure it stays on top */
}
#status {
width: 50px;
height: 30px;
position: fixed;
left: 50%;
/* centers the loading animation horizontally one the screen */
top: 50%;
/* centers the loading animation vertically one the screen */
margin: -25px 0 0 -15px;
/* is width and height divided by two */
}
.spinner {
margin: 0px auto;
width: 50px;
height: 30px;
text-align: center;
font-size: 10px;
}
.spinner > div {
background-color: #fff;
height: 100%;
width: 6px;
display: inline-block;
-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
animation: stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.spinner .rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.spinner .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.spinner .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
@-webkit-keyframes stretchdelay {
0%,
40%,
100% {
-webkit-transform: scaleY(0.4)
}
20% {
-webkit-transform: scaleY(1.0)
}
}
@keyframes stretchdelay {
0%,
40%,
100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
}
20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}
.player {
position: relative;
z-index: 5;
width: 100%;
padding: 18px 0;
}
.player_body {
position: relative;
z-index: 10;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
width: 275px;
height: 490px;
margin: auto;
background: rgba(255, 255, 255, 1);
box-shadow: 0 5px 10px 2px rgba(0, 0, 0, .15), 0 15px 35px 0 rgba(0, 105, 92, .5);
}
.waves {
position: relative;
z-index: 20;
top: -220px;
-webkit-transition: top .2s ease-in-out;
transition: top .2s ease-in-out;
}
.waves.waves_up {
top: -430px;
}
.player_content {
position: relative;
z-index: 50;
width: 100%;
height: 490px;
}
.player_header {
position: relative;
z-index: 55;
padding: 18px 0;
color: rgba(0, 178, 250, 1);
background-color: rgba(255, 255, 255, 1);
}
.header_name {
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
}
/* Hamburger menu */
.hamburger-menu,
.back_btn,
.nav_menu {
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.hamburger-menu {
position: absolute;
z-index: 70;
top: 18px;
right: 16px;
width: 15px;
height: 15px;
cursor: pointer;
}
.hamburger-menu.slide {
margin-right: 232px;
}
.back_btn.slide {
margin-left: -232px;
}
.nav_menu {
position: absolute;
z-index: 70;
right: -235px;
width: 235px;
height: 100%;
background-color: rgba(255, 255, 255, 1);
}
.nav_list {
position: relative;
}
.nav_item {
padding: 15px 20px;
border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.nav_item p {
font-size: 14px;
font-weight: 300;
margin: -1px 0;
color: rgba(0, 0, 0, .9);
}
.nav_item a {
font-size: 22px;
font-weight: 300;
color: rgba(0, 0, 0, 1);
}
.nav_menu.open {
right: 0;
}
.player_fade {
-webkit-transition: background .2s ease-in-out;
transition: background .2s ease-in-out;
background: rgba(0, 0, 0, 0);
}
.player_fade.player_fade_on {
position: absolute;
z-index: 65;
width: 275px;
height: 490px;
background: rgba(0, 0, 0, .5);
}
.bar,
.bar:after,
.bar:before {
width: 15px;
height: 3px;
}
.bar {
position: relative;
-webkit-transition: all 0ms 300ms;
transition: all 0ms 300ms;
-webkit-transform: translateY(6px);
transform: translateY(6px);
background: rgba(0, 178, 250, 1);
}
.bar.animate {
background: rgba(0, 178, 250, 0);
}
.bar:before {
position: absolute;
bottom: 6px;
left: 0;
content: '';
-webkit-transition: bottom 300ms 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms cubic-bezier(.23, 1, .32, 1);
transition: bottom 300ms 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms cubic-bezier(.23, 1, .32, 1);
transition: bottom 300ms 300ms cubic-bezier(.23, 1, .32, 1), transform 300ms cubic-bezier(.23, 1, .32, 1);
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);
background: rgba(0, 178, 250, 1);
}
.bar:after {
position: absolute;
top: 6px;
left: 0;
content: '';
-webkit-transition: top 300ms 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms cubic-bezier(.23, 1, .32, 1);
transition: top 300ms 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms cubic-bezier(.23, 1, .32, 1);
transition: top 300ms 300ms cubic-bezier(.23, 1, .32, 1), transform 300ms cubic-bezier(.23, 1, .32, 1);
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);
background: rgba(0, 178, 250, 1);
}
.bar.animate:after {
top: 0;
-webkit-transition: top 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms 300ms cubic-bezier(.23, 1, .32, 1);
transition: top 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms 300ms cubic-bezier(.23, 1, .32, 1);
transition: top 300ms cubic-bezier(.23, 1, .32, 1), transform 300ms 300ms cubic-bezier(.23, 1, .32, 1);
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);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.bar.animate:before {
bottom: 0;
-webkit-transition: bottom 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms 300ms cubic-bezier(.23, 1, .32, 1);
transition: bottom 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms 300ms cubic-bezier(.23, 1, .32, 1);
transition: bottom 300ms cubic-bezier(.23, 1, .32, 1), transform 300ms 300ms cubic-bezier(.23, 1, .32, 1);
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);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
;
}
/* ------------------------------------- */
.player_playlist {
position: absolute;
z-index: 60;
top: 490px;
overflow: scroll;
overflow-x: hidden;
width: 275px;
height: 305px;
-webkit-transition: top .2s ease-in-out;
transition: top .2s ease-in-out;
background-color: rgba(255, 255, 255, 1);
}
.player_playlist::-webkit-scrollbar {
width: 5px !important;
}
.player_playlist::-webkit-scrollbar-track {
background-color: rgba(0, 0, 0, .1) !important;
}
.player_playlist::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .3) !important;
}
.player_playlist_list {
position: relative;
}
/* */
.player_playlist_item {
width: 100%;
padding: 4px 18px;
cursor: pointer;
border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.player_playlist_item:hover {
background: #e6e6e6;
}
.player_playlist_item:active {
background: #d2d2d2;
}
.player_playlist_item.active {
border-bottom-color: #7d7d7d;
background: #7d7d7d;
}
.player_playlist_item.active * {
color: #fff;
}
.song_block {
display: inline-block;
}
.song block h6 {
font-size: 14px;
font-weight: 500;
margin-bottom: 3px;
}
.song_block p {
font-size: 11px;
color: rgba(144, 144, 144, 1);
}
.song_time {
font-size: 11px;
position: relative;
top: 20px;
float: right;
color: rgba(144, 144, 144, 1);
}
.glyphicon-menu-left {
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.glyphicon-menu-left.back_btn_on {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.player_playlist.playlist_on {
top: 185px;
}
.album_wrap {
position: relative;
z-index: 40;
top: 0;
padding: 18px 0 30px 0;
-webkit-transition: top .3s ease-in-out;
transition: top .3s ease-in-out;
}
.album_wrap.album_up {
top: -300px;
-webkit-transition: top .2s ease-in-out;
transition: top .2s ease-in-out;
}
.jAudio--thumb {
width: 150px;
height: 150px;
margin-right: auto;
margin-left: auto;
background-image: url("");
background-repeat: no-repeat;
background-size: cover;
-webkit-transition: background-image .2s ease-in-out;
transition: background-image .2s ease-in-out;
}
.no_album_img {
width: 150px;
height: 150px;
margin-right: auto;
margin-left: auto;
background: url(https://s30.postimg.org/shr4aygpt/default_album_art_blue2.jpg);
background-repeat: no-repeat;
background-size: cover;
box-shadow: 0 10px 20px -15px rgba(0, 0, 0, .35), 0 22px 40px -15px rgba(0, 0, 0, .20);
}
.song_playing {
height: 113px;
font-size: 14.5px;
line-height: 135%;
position: relative;
top: 0;
padding: 6px 0 69px 0;
-webkit-transition: top .5s ease-in-out;
transition: top .5s ease-in-out;
}
.song_playing.song_playing_up {
top: -300px;
-webkit-transition: top .2s ease-in-out;
transition: top .2s ease-in-out;
}
.song_name {
font-weight: 500;
}
.artist_name {
font-size: 10.5px;
color: rgba(144, 144, 144, 1);
}
.timeline_wrap {
position: relative;
position: relative;
top: 0;
margin-top: 5px;
-webkit-transition: top .2s ease-in-out;
transition: top .2s ease-in-out;
}
.line_played {
position: absolute;
top: 3px;
height: 3px;
background-color: rgba(255, 255, 255, 1);
}
.line_preload {
position: absolute;
top: 4px;
height: 2px;
background-color: rgb(0, 129, 181);
}
.line_preload.line_preload_up {
background-color: rgba(0, 0, 0, 0.15);
}
.progress-bar-wrapper {
width: 100%;
height: 10px;
cursor: pointer;
}
.full_line {
position: absolute;
top: 4px;
width: 100%;
height: 2px;
-webkit-transition: background-color .2s ease-in-out;
transition: background-color .2s ease-in-out;
background-color: rgba(255, 255, 255, .4);
}
.progress-bar-pointer {
position: absolute;
top: 0;
right: -1px;
width: 0;
height: 0;
-webkit-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
border-radius: 50%;
background: #fff;
}
.progress-bar-wrapper:hover .progress-bar-pointer {
top: -3px;
right: -5px;
width: 10px;
height: 10px;
}
.progress-bar-pointer.progress-bar-pointer_up {
background: rgba(0, 178, 250, 1);
}
.time_of_song {
font-size: 9px;
padding-top: 7px;
-webkit-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
color: rgba(255, 255, 255, 1);
}
.player_btns {
position: relative;
z-index: 1;
top: -5px;
left: 14px;
width: 270px;
padding-top: 33px;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
color: rgba(255, 255, 255, 1);
}
.play_btn {
position: absolute;
top: -16px;
left: 8px;
width: 51px;
height: 51px;
color: rgba(0, 178, 250, 1);
border-radius: 50%;
background-color: rgba(255, 255, 255, 1);
box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);
}
.timeline_wrap.timeline_wrap_up,
.player_btns.player_btns_up {
top: -305px;
color: rgba(0, 0, 0, 1);
}
.line_played.line_played_up {
top: 3px;
background-color: rgba(0, 178, 250, 1);
}
.full_line.full_line_up {
background-color: rgba(0, 178, 250, .4);
}
.time_of_song.time_of_song_up {
color: rgba(0, 178, 250, 1);
}
#play_circle {
top: 17px;
left: 1px;
}
.back_btn:hover {
cursor: pointer;
}
.random_btn:hover,
.prev_btn:hover,
.next_btn:hover,
.repeat_btn:hover {
cursor: pointer;
color: rgba(0, 47, 62, 1);
}
.play_btn:hover {
cursor: pointer;
background-color: rgba(0, 47, 62, 1);
}
.random_btn_on,
.repeat_btn_on {
color: rgba(0, 47, 62, 1);
}
.touch-screen .menu_btn:hover,
.touch-screen .random_btn:hover,
.touch-screen .prev_btn:hover,
.touch-screen .next_btn:hover,
.touch-screen .repeat_btn:hover {
color: #fff;
}
.touch-screen .play_btn:hover {
background-color: #fff;
}
.player .pl-list__eq {
display: none;
}
.player .pl-list--current {
background: #1ec279;
color: #fff;
}
.player .pl-list--current .pl-list__eq {
display: block;
}
@keyframes eq {
0% {
height: 3px;
}
50% {
height: 15px;
}
100% {
height: 3px;
}
}
.player .eq {
display: flex;
width: 20px;
height: 15px;
margin: 0 auto;
justify-content: space-between;
align-items: flex-end;
}
.player .eq__bar {
width: 4px;
background: #fff;
filter: drop-shadow(0 0 5px #fff);
}
.player .eq__bar:nth-child(2) {
animation: eq 1.2s ease-in-out infinite 0s;
}
.player .eq__bar:nth-child(4) {
animation: eq 1.2s ease-in-out infinite .2s;
}
.player .eq__bar:nth-child(1) {
animation: eq 1.2s ease-in-out infinite .4s;
}
.player .eq__bar:nth-child(3) {
animation: eq 1.2s ease-in-out infinite .6s;
}Here’s the explanation for the above code:-
The Above CSS Code for Music Player defines global styles for the entire HTML document, setting the font, size, background color, and other properties.
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.
It also includes various control buttons such as play, previous, next, repeat, and random.
Login and Registration Form Using HTML CSS JavaScript
CSS Code Output For Music Player
Step 3: JavaScript Code for Music Player Code
Create another file in the same folder name as script.js and paste the following code:-
$(window).on('load', function() { // makes sure the whole site is loaded
$('#status').fadeOut(); // will first fade out the loading animation
$('#preloader').delay(500).fadeOut('slow'); // will fade out the white DIV that covers the website.
checkTouchScreen();
})
$(document).ready(function() {
(function(window, undefined) {
'use strict';
var AudioPlayer = (function() {
// Player vars!
var
docTitle = document.title,
player = document.getElementById('ap'),
playBtn,
// playSvg,
// playSvgPath,
prevBtn,
nextBtn,
// plBtn,
repeatBtn,
// volumeBtn,
progressBar,
preloadBar,
curTime,
durTime,
trackTitle,
audio,
index = 0,
playList,
volumeBar,
wheelVolumeValue = 0,
volumeLength,
repeating = false,
seeking = false,
rightClick = false,
apActive = false,
// playlist vars
plPlaylist = document.getElementById('navMenu'),
pl,
plUl,
plLi,
tplList =
'<li class="player_playlist_item pl-list" data-track="{count}">' +
'<div class="pl-list__track">' +
'<div class="pl-list__icon"></div>' +
'<div class="pl-list__eq">' +
'<div class="eq">' +
'<div class="eq__bar"></div>' +
'<div class="eq__bar"></div>' +
'<div class="eq__bar"></div>' +
'<div class="eq__bar"></div>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="song_block pl-list__title">{title}</div>' +
'</li>',
// settings
settings = {
volume: 1,
changeDocTitle: true,
confirmClose: true,
autoPlay: false,
buffered: true,
notification: true,
playList: []
};
function init(options) {
if (!('classList' in document.documentElement)) {
return false;
}
if (apActive || player === null) {
return 'Player already init';
}
settings = extend(settings, options);
// get player elements
playBtn = player.querySelector('.play_btn');
// playSvg = playBtn.querySelector('.glyphicon-play');
// playSvgPath = playSvg.querySelector('path');
prevBtn = player.querySelector('.prev_btn');
nextBtn = player.querySelector('.next_btn');
repeatBtn = player.querySelector('.repeat_btn');
curTime = player.querySelector('.time_played');
durTime = player.querySelector('.full_time');
trackTitle = player.querySelector('.song_playing');
progressBar = player.querySelector('.line_played');
preloadBar = player.querySelector('.line_preload');
playList = settings.playList;
playBtn.addEventListener('click', playToggle, false);
repeatBtn.addEventListener('click', repeatToggle, false);
progressBar.closest('.progress-bar-wrapper').addEventListener('mousedown', handlerBar, false);
progressBar.closest('.progress-bar-wrapper').addEventListener('mousemove', seek, false);
document.documentElement.addEventListener('mouseup', seekingFalse, false);
// volumeBar.closest('.volume').addEventListener('mousedown', handlerVol, false);
// volumeBar.closest('.volume').addEventListener('mousemove', setVolume);
// volumeBar.closest('.volume').addEventListener(wheel(), setVolume, false);
// document.documentElement.addEventListener('mouseup', seekingFalse, false);
prevBtn.addEventListener('click', prev, false);
nextBtn.addEventListener('click', next, false);
apActive = true;
// Create playlist
renderPL();
// Create audio object
audio = new Audio();
audio.volume = settings.volume;
audio.preload = 'auto';
audio.addEventListener('error', errorHandler, false);
audio.addEventListener('timeupdate', timeUpdate, false);
audio.addEventListener('ended', doEnd, false);
// volumeBar.style.height = audio.volume * 100 + '%';
// volumeLength = volumeBar.css('height');
if (settings.confirmClose) {
window.addEventListener("beforeunload", beforeUnload, false);
}
if (isEmptyList()) {
return false;
}
audio.src = playList[index].file;
trackTitle.innerHTML = playList[index].title;
if (settings.autoPlay) {
audio.play();
// playBtn.classList.add('is-playing');
$('#play_circle').removeClass('glyphicon-play').addClass('glyphicon-pause');
$('#npAction').text(function(i, text) {
if (text === "PAUSED...") {
return "NOW PLAYING";
}})
plLi[index].classList.add('pl-list--current');
notify(playList[index].title, {
icon: playList[index].icon,
body: 'Now playing'
});
}
}
function changeDocumentTitle(title) {
if (settings.changeDocTitle) {
if (title) {
document.title = title;
} else {
document.title = docTitle;
}
}
}
function beforeUnload(evt) {
if (!audio.paused) {
var message = 'Music still playing';
evt.returnValue = message;
return message;
}
}
function errorHandler(evt) {
if (isEmptyList()) {
return;
}
var mediaError = {
'1': 'MEDIA_ERR_ABORTED',
'2': 'MEDIA_ERR_NETWORK',
'3': 'MEDIA_ERR_DECODE',
'4': 'MEDIA_ERR_SRC_NOT_SUPPORTED'
};
audio.pause();
curTime.innerHTML = '--';
durTime.innerHTML = '--';
progressBar.style.width = 0;
preloadBar.style.width = 0;
// playBtn.classList.remove('is-playing');
$('#play_circle').addClass('glyphicon-play').removeClass('glyphicon-pause');
$('#npAction').text(function(i, text) {
if (text === "NOW PLAYING") {
return "PAUSED...";
}
})
// playSvgPath.setAttribute('d', playSvg.getAttribute('data-play'));
plLi[index] && plLi[index].classList.remove('pl-list--current');
changeDocumentTitle();
throw new Error('Houston we have a problem: ' + mediaError[evt.target.error.code]);
}
/**
* UPDATE PL
*/
function updatePL(addList) {
if (!apActive) {
return 'Player is not yet initialized';
}
if (!Array.isArray(addList)) {
return;
}
if (addList.length === 0) {
return;
}
var count = playList.length;
var html = [];
playList.push.apply(playList, addList);
addList.forEach(function(item) {
html.push(
tplList.replace('{count}', count++).replace('{title}', item.title)
);
});
// If exist empty message
if (plUl.querySelector('.pl-list--empty')) {
plUl.removeChild(pl.querySelector('.pl-list--empty'));
audio.src = playList[index].file;
trackTitle.innerHTML = playList[index].title;
}
// Add song into playlist
plUl.insertAdjacentHTML('beforeEnd', html.join(''));
plLi = pl.querySelectorAll('li');
}
/**
* PlayList methods
*/
function renderPL() {
var html = [];
playList.forEach(function(item, i) {
html.push(
tplList.replace('{count}', i).replace('{title}', item.title)
);
});
pl = create('div', {
'className': 'player_playlist',
'id': 'pl',
'innerHTML': '<ul class="pl-ul">' + (!isEmptyList() ? html.join('') : '<li class="pl-list--empty">PlayList is empty</li>') + '</ul>'
});
plPlaylist.parentNode.insertBefore(pl, plPlaylist.nextSibling);
plUl = pl.querySelector('.pl-ul');
plLi = plUl.querySelectorAll('li');
pl.addEventListener('click', listHandler, false);
}
function listHandler(evt) {
evt.preventDefault();
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')) {
var current = parseInt(evt.target.closest('.pl-list').getAttribute('data-track'), 10);
if (index !== current) {
index = current;
play(current);
} else {
playToggle();
}
} else {
if (!!evt.target.closest('.pl-list__remove')) {
var parentEl = evt.target.closest('.pl-list');
var isDel = parseInt(parentEl.getAttribute('data-track'), 10);
playList.splice(isDel, 1);
parentEl.closest('.pl-ul').removeChild(parentEl);
plLi = pl.querySelectorAll('li');
[].forEach.call(plLi, function(el, i) {
el.setAttribute('data-track', i);
});
if (!audio.paused) {
if (isDel === index) {
play(index);
}
} else {
if (isEmptyList()) {
clearAll();
} else {
if (isDel === index) {
if (isDel > playList.length - 1) {
index -= 1;
}
audio.src = playList[index].file;
trackTitle.innerHTML = playList[index].title;
progressBar.style.width = 0;
}
}
}
if (isDel < index) {
index--;
}
}
}
}
function plActive() {
if (audio.paused) {
plLi[index].classList.remove('pl-list--current');
return;
}
var current = index;
for (var i = 0, len = plLi.length; len > i; i++) {
plLi[i].classList.remove('pl-list--current');
}
plLi[current].classList.add('pl-list--current');
}
/**
* Player methods
*/
function play(currentIndex) {
if (isEmptyList()) {
return clearAll();
}
index = (currentIndex + playList.length) % playList.length;
audio.src = playList[index].file;
trackTitle.innerHTML = playList[index].title;
// Change document title
changeDocumentTitle(playList[index].title);
// Audio play
audio.play();
// Show notification
notify(playList[index].title, {
icon: playList[index].icon,
body: 'Now playing',
tag: 'music-player'
});
// Toggle play button
playBtn.classList.add('is-playing');
playSvgPath.setAttribute('d', playSvg.getAttribute('data-pause'));
// Set active song playlist
plActive();
}
function prev() {
play(index - 1);
}
function next() {
play(index + 1);
}
function isEmptyList() {
return playList.length === 0;
}
function clearAll() {
audio.pause();
audio.src = '';
trackTitle.innerHTML = 'queue is empty';
curTime.innerHTML = '--';
durTime.innerHTML = '--';
progressBar.style.width = 0;
preloadBar.style.width = 0;
playBtn.classList.remove('is-playing');
playSvgPath.setAttribute('d', playSvg.getAttribute('data-play'));
if (!plUl.querySelector('.pl-list--empty')) {
plUl.innerHTML = '<li class="pl-list--empty">PlayList is empty</li>';
}
changeDocumentTitle();
}
function playToggle() {
if (isEmptyList()) {
return;
}
if (audio.paused) {
if (audio.currentTime === 0) {
notify(playList[index].title, {
icon: playList[index].icon,
body: 'Now playing'
});
}
changeDocumentTitle(playList[index].title);
audio.play();
playBtn.classList.add('is-playing');
playSvgPath.setAttribute('d', playSvg.getAttribute('data-pause'));
} else {
changeDocumentTitle();
audio.pause();
playBtn.classList.remove('is-playing');
playSvgPath.setAttribute('d', playSvg.getAttribute('data-play'));
}
plActive();
}
function volumeToggle() {
if (audio.muted) {
if (parseInt(volumeLength, 10) === 0) {
volumeBar.style.height = settings.volume * 100 + '%';
audio.volume = settings.volume;
} else {
volumeBar.style.height = volumeLength;
}
audio.muted = false;
volumeBtn.classList.remove('has-muted');
} else {
audio.muted = true;
volumeBar.style.height = 0;
volumeBtn.classList.add('has-muted');
}
}
function repeatToggle() {
if (repeatBtn.classList.contains('is-active')) {
repeating = false;
repeatBtn.classList.remove('is-active');
} else {
repeating = true;
repeatBtn.classList.add('is-active');
}
}
function plToggle() {
plBtn.classList.toggle('is-active');
pl.classList.toggle('h-show');
}
function timeUpdate() {
if (audio.readyState === 0) return;
var barlength = Math.round(audio.currentTime * (100 / audio.duration));
progressBar.style.width = barlength + '%';
var
curMins = Math.floor(audio.currentTime / 60),
curSecs = Math.floor(audio.currentTime - curMins * 60),
mins = Math.floor(audio.duration / 60),
secs = Math.floor(audio.duration - mins * 60);
(curSecs < 10) && (curSecs = '0' + curSecs);
(secs < 10) && (secs = '0' + secs);
curTime.innerHTML = curMins + ':' + curSecs;
durTime.innerHTML = mins + ':' + secs;
if (settings.buffered) {
var buffered = audio.buffered;
if (buffered.length) {
var loaded = Math.round(100 * buffered.end(0) / audio.duration);
preloadBar.style.width = loaded + '%';
}
}
}
/**
* TODO shuffle
*/
function shuffle() {
if (shuffle) {
index = Math.round(Math.random() * playList.length);
}
}
function doEnd() {
if (index === playList.length - 1) {
if (!repeating) {
audio.pause();
plActive();
playBtn.classList.remove('is-playing');
playSvgPath.setAttribute('d', playSvg.getAttribute('data-play'));
return;
} else {
play(0);
}
} else {
play(index + 1);
}
}
function moveBar(evt, el, dir) {
var value;
if (dir === 'horizontal') {
value = Math.round(((evt.clientX - el.offset().left) + window.pageXOffset) * 100 / el.parentNode.offsetWidth);
el.style.width = value + '%';
return value;
} else {
if (evt.type === wheel()) {
value = parseInt(volumeLength, 10);
var delta = evt.deltaY || evt.detail || -evt.wheelDelta;
value = (delta > 0) ? value - 10 : value + 10;
} else {
var offset = (el.offset().top + el.offsetHeight) - window.pageYOffset;
value = Math.round((offset - evt.clientY));
}
if (value > 100) value = wheelVolumeValue = 100;
if (value < 0) value = wheelVolumeValue = 0;
volumeBar.style.height = value + '%';
return value;
}
}
function handlerBar(evt) {
rightClick = (evt.which === 3) ? true : false;
seeking = true;
seek(evt);
}
function handlerVol(evt) {
rightClick = (evt.which === 3) ? true : false;
seeking = true;
setVolume(evt);
}
function seek(evt) {
if (seeking && rightClick === false && audio.readyState !== 0) {
var value = moveBar(evt, progressBar, 'horizontal');
audio.currentTime = audio.duration * (value / 100);
}
}
function seekingFalse() {
seeking = false;
}
function setVolume(evt) {
evt.preventDefault();
volumeLength = volumeBar.css('height');
if (seeking && rightClick === false || evt.type === wheel()) {
var value = moveBar(evt, volumeBar.parentNode, 'vertical') / 100;
if (value <= 0) {
audio.volume = 0;
audio.muted = true;
volumeBtn.classList.add('has-muted');
} else {
if (audio.muted) audio.muted = false;
audio.volume = value;
volumeBtn.classList.remove('has-muted');
}
}
}
function notify(title, attr) {
if (!settings.notification) {
return;
}
if (window.Notification === undefined) {
return;
}
attr.tag = 'AP music player';
window.Notification.requestPermission(function(access) {
if (access === 'granted') {
var notice = new Notification(title.substr(0, 110), attr);
setTimeout(notice.close.bind(notice), 5000);
}
});
}
/* Destroy method. Clear All */
function destroy() {
if (!apActive) return;
if (settings.confirmClose) {
window.removeEventListener('beforeunload', beforeUnload, false);
}
playBtn.removeEventListener('click', playToggle, false);
volumeBtn.removeEventListener('click', volumeToggle, false);
repeatBtn.removeEventListener('click', repeatToggle, false);
plBtn.removeEventListener('click', plToggle, false);
progressBar.closest('.progress-container').removeEventListener('mousedown', handlerBar, false);
progressBar.closest('.progress-container').removeEventListener('mousemove', seek, false);
document.documentElement.removeEventListener('mouseup', seekingFalse, false);
volumeBar.closest('.volume').removeEventListener('mousedown', handlerVol, false);
volumeBar.closest('.volume').removeEventListener('mousemove', setVolume);
volumeBar.closest('.volume').removeEventListener(wheel(), setVolume);
document.documentElement.removeEventListener('mouseup', seekingFalse, false);
prevBtn.removeEventListener('click', prev, false);
nextBtn.removeEventListener('click', next, false);
audio.removeEventListener('error', errorHandler, false);
audio.removeEventListener('timeupdate', timeUpdate, false);
audio.removeEventListener('ended', doEnd, false);
// Playlist
pl.removeEventListener('click', listHandler, false);
pl.parentNode.removeChild(pl);
audio.pause();
apActive = false;
index = 0;
playBtn.classList.remove('is-playing');
// playSvgPath.setAttribute('d', playSvg.getAttribute('data-play'));
// volumeBtn.classList.remove('has-muted');
// plBtn.classList.remove('is-active');
repeatBtn.classList.remove('is-active');
// Remove player from the DOM if necessary
// player.parentNode.removeChild(player);
}
/**
* Helpers
*/
function wheel() {
var wheel;
if ('onwheel' in document) {
wheel = 'wheel';
} else if ('onmousewheel' in document) {
wheel = 'mousewheel';
} else {
wheel = 'MozMousePixelScroll';
}
return wheel;
}
function extend(defaults, options) {
for (var name in options) {
if (defaults.hasOwnProperty(name)) {
defaults[name] = options[name];
}
}
return defaults;
}
function create(el, attr) {
var element = document.createElement(el);
if (attr) {
for (var name in attr) {
if (element[name] !== undefined) {
element[name] = attr[name];
}
}
}
return element;
}
function getTrack(index) {
return playList[index];
}
Element.prototype.offset = function() {
var el = this.getBoundingClientRect(),
scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
scrollTop = window.pageYOffset || document.documentElement.scrollTop;
return {
top: el.top + scrollTop,
left: el.left + scrollLeft
};
};
Element.prototype.css = function(attr) {
if (typeof attr === 'string') {
return getComputedStyle(this, '')[attr];
} else if (typeof attr === 'object') {
for (var name in attr) {
if (this.style[name] !== undefined) {
this.style[name] = attr[name];
}
}
}
};
// matches polyfill
window.Element && function(ElementPrototype) {
ElementPrototype.matches = ElementPrototype.matches ||
ElementPrototype.matchesSelector ||
ElementPrototype.webkitMatchesSelector ||
ElementPrototype.msMatchesSelector ||
function(selector) {
var node = this,
nodes = (node.parentNode || node.document).querySelectorAll(selector),
i = -1;
while (nodes[++i] && nodes[i] != node);
return !!nodes[i];
};
}(Element.prototype);
// closest polyfill
window.Element && function(ElementPrototype) {
ElementPrototype.closest = ElementPrototype.closest ||
function(selector) {
var el = this;
while (el.matches && !el.matches(selector)) el = el.parentNode;
return el.matches ? el : null;
};
}(Element.prototype);
/**
* Public methods
*/
return {
init: init,
update: updatePL,
destroy: destroy,
getTrack: getTrack
};
})();
window.AP = AudioPlayer;
})(window);
// TEST: image for web notifications
var iconImage = 'http://funkyimg.com/i/21pX5.png';
AP.init({
playList: [{
'icon': iconImage,
'title': 'Hitman',
'file': 'http://incompetech.com/music/royalty-free/mp3-royaltyfree/Hitman.mp3'
}, {
'icon': iconImage,
'title': 'Forever Believe',
'file': 'https://a.clyp.it/zbh0qeyo.mp3'
}, {
'icon': iconImage,
'title': 'Drifting',
'file': 'https://a.clyp.it/bthbgqcs.mp3'
}, {
'icon': iconImage,
'title': 'Clap Along (Lorem ipsum dolor sit amet, consectetur adipisicing.)',
'file': 'https://a.clyp.it/lygki3hx.mp3'
}, {
'icon': iconImage,
'title': 'Pop Tune',
'file': 'https://a.clyp.it/enddsv44.mp3'
}]
});
$(document).ready(function() {
$(".pl-list__download").on("click", function() {
var trackPlaying = $(this).closest(".pl-list");
console.log(AP.getTrack(trackPlaying.attr("data-track")));
});
});
(function() {
$('.back_btn').on('click', function() {
$('.player_playlist').toggleClass('playlist_on');
$('.glyphicon-menu-left').toggleClass('back_btn_on');
$('.waves').toggleClass('waves_up');
$('.album_wrap').toggleClass('album_up');
$('.song_playing').toggleClass('song_playing_up');
$('.timeline_wrap').toggleClass('timeline_wrap_up');
$('.player_btns').toggleClass('player_btns_up');
$('.line_played').toggleClass('line_played_up');
$('.full_line').toggleClass('full_line_up');
$('.time_of_song').toggleClass('time_of_song_up');
$('.progress-bar-pointer').toggleClass('progress-bar-pointer_up');
$('.line_preload').toggleClass('line_preload_up');
})
})();
(function() {
$('.hamburger-menu').on('click', function() {
$('.bar').toggleClass('animate');
$('.hamburger-menu').toggleClass('slide');
$('.back_btn').toggleClass('slide');
$('.nav_menu').toggleClass('open');
$('.player_fade').toggleClass('player_fade_on');
})
})();
(function() {
$('.play_btn').on('click', function() {
$('#play_circle').toggleClass('glyphicon-play').toggleClass('glyphicon-pause');
$('#npAction').text(function(i, text) {
return text === "PAUSED..." ? "NOW PLAYING" : "PAUSED...";
})
})
})();
(function() {
$('.random_btn').on('click', function() {
$('.random_btn').toggleClass('random_btn_on');
})
})();
(function() {
$('.repeat_btn').on('click', function() {
$('.repeat_btn').toggleClass('repeat_btn_on');
})
})();
// отменить выделение текста
function preventSelection(element) {
var preventSelection = false;
function addHandler(element, event, handler) {
if (element.attachEvent)
element.attachEvent('on' + event, handler);
else
if (element.addEventListener)
element.addEventListener(event, handler, false);
}
function removeSelection() {
if (window.getSelection) {
window.getSelection().removeAllRanges();
} else if (document.selection && document.selection.clear)
document.selection.clear();
}
function killCtrlA(event) {
var event = event || window.event;
var sender = event.target || event.srcElement;
if (sender.tagName.match(/INPUT|TEXTAREA/i))
return;
var key = event.keyCode || event.which;
if (event.ctrlKey && key == 'A'.charCodeAt(0)) // 'A'.charCodeAt(0) можно заменить на 65
{
removeSelection();
if (event.preventDefault)
event.preventDefault();
else
event.returnValue = false;
}
}
// не даем выделять текст мышкой
addHandler(element, 'mousemove', function() {
if (preventSelection)
removeSelection();
});
addHandler(element, 'mousedown', function(event) {
var event = event || window.event;
var sender = event.target || event.srcElement;
preventSelection = !sender.tagName.match(/INPUT|TEXTAREA/i);
});
// борем dblclick
// если вешать функцию не на событие dblclick, можно избежать
// временное выделение текста в некоторых браузерах
addHandler(element, 'mouseup', function() {
if (preventSelection)
removeSelection();
preventSelection = false;
});
// борем ctrl+A
// скорей всего это и не надо, к тому же есть подозрение
// что в случае все же такой необходимости функцию нужно
// вешать один раз и на document, а не на элемент
addHandler(element, 'keydown', killCtrlA);
addHandler(element, 'keyup', killCtrlA);
}
preventSelection(document);
});
function checkTouchScreen() {
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
$('body').addClass('touch-screen');
return true;
} else {
$('body').removeClass('touch-screen');
return false;
}
}
//https://codepen.io/MichaelMammoliti/pen/VYEWZgHere’s the explanation of the above code for the music player:-
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.
The JavaScript responds to events like clicking on play, repeat, next, and previous buttons.
How to create a stopwatch using HTML,CSS and JavaScript
Final Output for Music Player
Conclusion
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.
Resources
Learn More About the JavaScript From here
Credit:- Shreya Suman
