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

on

20 comments:

  1. UnknownJune 29, 2019 at 8:26 AM

    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. Ritesh ShresthaAugust 16, 2020 at 1:08 AM

      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. unknownJuly 23, 2019 at 9:32 AM

    alle alle allee

    ReplyDelete
  3. Real Soch October 5, 2019 at 6:40 AM

    Very helpful information

    ReplyDelete
  4. StevenNovember 30, 2019 at 1:51 AM

    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
  5. RAJKUMAR DASDecember 21, 2019 at 10:30 PM

    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
  6. UnknownSeptember 13, 2020 at 5:12 AM

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

    ReplyDelete
  7. Charlie FredaJanuary 26, 2021 at 11:36 PM

    sdfghj

    ReplyDelete
  8. Michael AlexanderJanuary 29, 2021 at 3:56 AM

    It’s my fortune to go to at this blog and realize out my required stuff that is also in the quality.
    movie songs

    ReplyDelete
  9. Michael MayrhoferFebruary 25, 2021 at 3:31 AM

    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

    ReplyDelete
  10. cceramicsMarch 31, 2021 at 2:30 AM

    Thank 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

    ReplyDelete
  11. mtom00000April 1, 2021 at 5:08 AM

    I like this blog so much, saved to my bookmarks . apnews

    ReplyDelete
  12. SiscomApril 1, 2021 at 6:44 AM

    Your 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

    ReplyDelete
  13. relxindoApril 14, 2021 at 12:12 AM

    An incredibly interesting examine, I may possibly not concur entirely, but you do make some very valid points. Organic Soundcloud Plays

    ReplyDelete
  14. AckleyAugust 17, 2021 at 1:04 PM

    I want to say thanks to you. I have bookmark your site for future updates. soundcloud promotion

    ReplyDelete
  15. APKfun.comAugust 20, 2021 at 5:44 PM

    Thank 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?
    komicast
    noveltoon

    ReplyDelete
  16. APK.careAugust 23, 2021 at 1:53 AM

    wow! Will try this way to see how it really is. apk.care

    ReplyDelete
  17. APKFun.comAugust 26, 2021 at 1:59 AM

    Thanks! This is definitely what I am looking for! APK Download

    ReplyDelete
  18. Levy ApkdownloadAugust 27, 2021 at 5:49 AM

    This was a really great contest and hopefully I can attend the next one. It was alot of fun and I really enjoyed it Apkdownload

    ReplyDelete
  19. mtomAugust 30, 2021 at 11:00 PM

    An 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

    ReplyDelete

Subscribe to: Post Comments (Atom)
© ThapaTechnical 2018. By SoraTemplates | DSTB By MyBloggerThemes | FreeBloggerTemplates