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
ReplyDeleteI want to say thanks to you. I have bookmark your site for future updates. soundcloud promotion
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?
ReplyDeletekomicast
noveltoon
wow! Will try this way to see how it really is. apk.care
ReplyDeleteThanks! This is definitely what I am looking for! APK Download
ReplyDeleteThis was a really great contest and hopefully I can attend the next one. It was alot of fun and I really enjoyed it Apkdownload
ReplyDeleteAn array of wild hair caution equipment in hair apply, tweezers, hydrogen stick reviews frizzy hair scissors, frizzy hair sawing scissors, sheers, specialist sheers, frizzy hair sheers, frizzy hair hair comb, bobby pin, head piece, eyelash curler, hair hair brush, plus shower limitation accessories can be purchased. trusted company
ReplyDeleteDigital commerce, also known as e-commerce , is indeed a business concept that allows businesses and individuals to buy and sell goods through the Internet. The growth of online developers in India has been fueled by advancements in the IT industry and increased consumer understanding of the Internet.
ReplyDeletePPC company in India
PPC Company in USA
We have other services like followers, likes and downloads
ReplyDeleteget soundcloud followers
We have other services like followers, likes and downloads
ReplyDeleteincrease soundcloud likes
Yes i am totally agreed with this article and i just want say that this article is very nice and very informative article.I will make sure to be reading your blog more. You made a good point but I can't help but wonder, what about the other side? !!!!!!Thanks bad kid chill city
ReplyDelete