Create a Music Player App in JavaScript with Code in Hindi

Create a Music Player App in JavaScript with Project Code in Hindi

Welcome to all :)

HTML File Source Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://fonts.googleapis.com/css?family=Maven+Pro&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>

<h1><i class="fa fa-music" aria-hidden="true"></i> My Music Player<i class="fa fa-music" aria-hidden="true"></i> </h1>
<h1> DONATION FOR SUPPORT: PhonePay = vinodbahadur@ybl GooglePay: vbthapa55@oksbi
Believe me all this money will be used to make more quality videos and to make my channel grow. So that I can always provide you awesome free videos :) </h1>

<main>

<div class="a song">a</div>
<div class="b song">b</div>
<div class="c song">c</div>

<div class="d song">d</div>
<div class="e song">e</div>
<div class="f song">f</div>

<div class="g song">g</div>
<div class="h song">h</div>
<div class="i song">i</div>

</main>

<script>

var divlenght = document.querySelectorAll('.song').length;
console.log(divlenght);

for(var i=0; i<divlenght; i++) {
var demo = document.querySelectorAll('.song')[i].addEventListener('click',playsong);

var demo = document.querySelectorAll('.song')[i].addEventListener('dblclick',pausesong);
}

var song1 = new Audio();
song1.src = "music/alan.mp3";

var song2 = new Audio();
song2.src = "music/alan2.mp3";

var song3 = new Audio();
song3.src = "music/alan3.mp3";

function playsong(){
var songId = this.innerHTML;
console.log(songId);

switch (songId) {
case "a":
song1.play();
break;

case "b":
song2.play();
break;

case "c":
song3.play();
break;

case "d":
song1.play();
break;

case "e":
song2.play();
break;

case "f":
song3.play();
break;

case "g":
song1.play();
break;

case "h":
song2.play();
break;

case "i":
song3.play();
break;

default:
console.log("wrong input");
break;
}
}

function pausesong(){
var songId = this.innerHTML;
console.log(songId);

switch (songId) {
case "a":
song1.pause();
break;

case "b":
song2.pause();
break;

case "c":
song3.pause();
break;

case "d":
song1.pause();
break;

case "e":
song2.pause();
break;

case "f":
song3.pause();
break;

case "g":
song1.pause();
break;

case "h":
song2.pause();
break;

case "i":
song3.pause();
break;

default:
console.log("wrong input");
break;
}
}

</script>
</body>
</html>

CSS Source Code:

*{
margin: 0; padding: 0;
box-sizing: border-box; font-family: 'Maven Pro', sans-serif;
}

h1{
text-align: center; font-size: 1.8rem;
color: #444; padding: 30px 0;
}

main{
width: 90%; height: 550px;
margin: auto; border: 1px solid black;
display: flex; justify-content: space-around;
align-items: center; flex-wrap: wrap;
}

div{
width: 30%; height: 160px;
/*border: 1px solid red;*/
box-shadow: 2px 2px 5px grey;
border-radius: 10px; cursor: pointer;

}

.a{
background-image: url('images/js2.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}

.b{
background-image: url('images/js10.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
}

.c{
background-image: url('images/js13.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
}

.d{
background-image: url('images/js4.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
}

.e{
background-image: url('images/js5.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
}
.f{
background-image: url('images/js11.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
}
.g{
background-image: url('images/js7.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
}

.h{
background-image: url('images/js14.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
}

.i{
background-image: url('images/js12.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
}