Create a Music Player App in JavaScript with Project Code in Hindi
Welcome to all :)
HTML File Source Code:
<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;
}
