THAPA TECHNICAL

HOUSE OF WEB DEVELOPERS AND TECHNOLOGY.

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;
}

7 comments:

  1. plz sir help me...its get an error ..Uncaught TypeError: Cannot read property 'play' of undefined.. i just check all bracket..but its not clear

    ReplyDelete
    Replies
    1. brother i think youre getting problem on pausesong i got also problem just type above the switch var songid = this.innerHTML your poblem is solved.

      Delete
  2. It joins the enormous measure of income the music business is as of now getting a seemingly endless amount of time after year. It is a relentless power as individuals consistently search up for the following incredible craftsman around the bend, along these lines proceeding with the cycle and the significance of music.https://many-ringtones.com/

    ReplyDelete
  3. IT still has a problem that when songs play on a single click and again when i click on the second song it is also playing without stopping the previous one. How to solve this problem..

    ReplyDelete
  4. hello need help can someone help me.
    would like to put in player buttons.
    https://github.com/ErAdityaJain/Music-Player

    ReplyDelete