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;
}
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
ReplyDeletebrother i think youre getting problem on pausesong i got also problem just type above the switch var songid = this.innerHTML your poblem is solved.
Deletealle alle allee
ReplyDeleteVery helpful information
ReplyDeleteIt 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/
ReplyDeleteIT 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..
ReplyDeletehello need help can someone help me.
ReplyDeletewould like to put in player buttons.
https://github.com/ErAdityaJain/Music-Player
sdfghj
ReplyDeleteIt’s my fortune to go to at this blog and realize out my required stuff that is also in the quality.
ReplyDeletemovie songs
Going to graduate school was a positive decision for me. I enjoyed the coursework, the presentations, the fellow students, and the professors. And since my company reimbursed 100% of the tuition, the only cost that I had to pay on my own was for books and supplies. Otherwise, I received a free master’s degree. All that I had to invest was my time. site de música
ReplyDeleteThank you for the auspicious writeup. It in fact was a amusement account it. Look advanced to more added agreeable from you! However, how could we communicate? digitaltrends
ReplyDeleteI like this blog so much, saved to my bookmarks . apnews
ReplyDeleteYour talent is really appreciated!! Thank you. You saved me a lot of frustration. I switched from Joomla to Drupal to the WordPress platform and Ive fully embraced WordPress. Its so much easier and easier to tweak. Anyway, thanks again. Awesome domain! btclod.com
ReplyDeleteAn incredibly interesting examine, I may possibly not concur entirely, but you do make some very valid points. Organic Soundcloud Plays
ReplyDelete