Build A Playable PIANO in HTML CSS & JavaScript | Virtual Piano 🎹 in JavaScript

Подписаться 222 тыс.

Просмотров 53 тыс.

50% 1

In this video, I've shown how to Build A Playable PIANO using HTML, CSS, and JavaScript. The user can play various tunes on this piano by clicking on the keys or using the keyboard keys. Users can also adjust the volume and show or hide shortcut keys on the piano.
Live Demo or Download Codes of this Playable PIANO
codingnepalweb.com/demos/play...
Download Only Tunes of this PIANO
drive.google.com/file/d/1HISR...
Second Channel - bit.ly/3aHNkru
Facebook - / coding.np
Instagram - / coding.np
Timestamps:
0:00 Demo of Piano
2:06 HTML & CSS Start
14:14 JavaScript Start
14:42 Playing Piano on Key Clicks
18:30 Playing Piano on Keyboard Key Clicks
23:31 Working on Volume Slider
25:33 Working on Key Show/Hide Checkbox
Music Credit:
Forever (Instrumental) - RYYZN (No Copyright Music)
• Forever (Instrumental)...
Ikson - Lights [Official]
• #32 Lights (Official)
Ikson - We Are Free [Official]
• #83 We Are Free (Offic...

Опубликовано:

31 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 108

@firstlastcode Год назад

Please don't change from this type of content. RU-vid is full of React and programming on different languages but when it comes to real world programming project in Javascript it not common. The ones we found were full of CSS but we don't need that we want to better our javascript skill

@firstlastcode Год назад

I'm learning a lot of from you thank you so much keep this great job up

@firstlastcode Год назад

I love your content so much I just found your channel few days ago. I'm a React developer but I just studied React after taking Javascript course so when it comes to Dom manipulation with Vanilla Js I'm bad

@francielybeckert8949 3 месяца назад

Thank you, I am doing my first project in the bootcamp, and without you I wouldn't know how to do a lot of things.

@redeyes4884 Год назад

Thank you for this. Looks amazing

@drstrange3447 Год назад

Great work brother looking forward for more exciting project keep up

@sin2na Год назад

간결하고 유용한 코드입니다. 정말 멋집니다.

@ArsenTech Год назад

Thanks. It Helps me Learn FrontEnd Development

@TheLoona Год назад

Your content is amazing helps me learn css and JavaScript ❤ your styling is just so good 🎉

@CodingNepal Год назад

Happy to hear that :)

@NewAgentt Год назад

@@CodingNepal Hey I Have A Challenge For You Make A Video Subtitle Maker Where You Upload A Video And You Get Text Change Font Add Text And Colors

@namjotsingh Год назад

Amazing project 🔥🔥

@asyaO2O3 3 месяца назад

Thank you so much. It help me lot

@hananal-slaiman1103 Год назад

Thanks , So beautiful

@FactFusion12394 11 месяцев назад

man I love you bro I was in a school project I choose musical instruments in software I am a full stack developer but I got stuck and I dont what to do inm piano after completing and creating a drum stick thanks man I love you

@415-sajidshaikh3 2 месяца назад

Thank you so much easy tutorial

@JGGarcia-kh8uq Год назад

Very nice work, Thank you for sharing!

@CodingNepal Год назад

You're welcome

@ngubanezibusiso5154 Год назад

Wow great design

@jahirrana8879 Год назад

Extraordinary boss

@youtubepremium956 Год назад

Beautiful work brother

@CodingNepal Год назад

Thanks brother

@timenm5538 Год назад

Hello! I have been watching your work for a long time and I always like the way you do it. I looked at this piano and I would make a new audio object for each click. For example: newAudio = new Audio(somefile) This way there will be no sound clip and the melody will be more melodic. Good luck to you!)

@CodingNepal Год назад

Thanks for the suggestion :)

@prodbybarn Год назад

Awesome, nice

@TheAnonymous_ofc Год назад

Amazing 😍😍😍😍😍😍

@hosseinpanahy5358 10 месяцев назад

Awesome

@entrenamientoauditivo2013 Год назад

Excelent, congratulations!

@CodingNepal Год назад

Many thanks!

@m-fazin Год назад

you best guy with the powerfull brian

@rochidzwachester8723 Год назад

I love this channel 💗💗💗

@CodingNepal Год назад

Keep loving

@Sandip_ts Год назад

great sir

@animatsuki5345 Год назад

a cool piano😮❤

@hopenare3737 Год назад

Amazing work. Fantastic job!👏👏👏👌 Can you try a guitar😃

@psharathchandra5072 Год назад

Great work. For mobile responsive can u just rotate the screen?

@kvelez 4 месяца назад

Good video.

@reallife1482 Год назад

Great work,,, brother 😍😍😍

@CodingNepal Год назад

Thanks you!

@ivanmenseguet8130 4 месяца назад

Thanks

@RitikRaj-zk1qd Год назад

hello bro I watched your video first time and really love it

@CodingNepal Год назад

Thanks and welcome

@nhatthien2910 Год назад

so good

@moingaymotquansach Год назад

tôi addEventLisstener keydown nhưng không được , nó không add class active vào element của tôi

@muxlisbek Год назад

Very good , Thanks UZB DEVLOPER

@djaffaroumennana Год назад

hello codingnepal i have a problem why if me want the play the audio he dont work'it

@sarasrajkumar Год назад

superb!

@CodingNepal Год назад

Thanks!

@melbycrib 8 месяцев назад

mksh om berkah berlimpah

@codeehub--------No-1 Год назад

Amazing Video Brother

@CodingNepal Год назад

Thanks brother

@ShadyAbqader-me1oe Год назад

where is the link of the voices to download it please

@samuelmarcano4781 Год назад

what fonts were you using?

@patrickessama5330 Год назад

So great

@CodingNepal Год назад

Thanks!

@hindibravenews Год назад

which screen recorder do you use

@GrowToGlow-th4le 6 месяцев назад

but this is such a nice tutorial

@MohiuddinAhmedEmon Год назад

Bhai live cricket score app banaiye plz... Love from Bangladesh....💝💝

@novalto. Год назад

amazing

@CodingNepal Год назад

Thanks!

@harshitjaiswal5783 10 месяцев назад

Unable to download audio please update the link

@GrowToGlow-th4le 6 месяцев назад

i copy a same code but computer is giving error (Open a folder or workspace... (File -> Open Folder)

@thetheedesk 4 месяца назад

now we all can put this to resume !

@TechBarAmaBaro4810 Год назад

😲, really I can't believe, sir, why you can't make a css and JS course, I would really love it

@CodingNepal Год назад

I'll think about courses.. Stay tuned!

@erfanhap4758 Год назад

amazing, but how did u do that cursor move in 15:45 ? what is the shortcut?

@bijay075 10 месяцев назад

Brother where is the best institute to learn coding in Nepal?

@giorgigazashvili2555 10 месяцев назад

მადლობა :დდდ

@ericcreativity Год назад

U are my mentor in programming but brother please try to use voice to explain but good content bro

@CodingNepal Год назад

Thanks brother, I'll think about the voice-over, but if you watch my video till the end, you'll know I explained each JavaScript line without speaking.

@siddharthmishra3853 Год назад

It will be a more useful video if you add your voice explaining the code instead of this music.

@uyiosaodemwingie8690 Год назад

How can I master JavaScript

@user-su5vs6uw7g 7 месяцев назад

Where is the explanation, there is only code in the video

@rayforever Год назад

Can you make course on web development please

@CodingNepal Год назад

I'll think about courses.. Stay tuned!

@dufitimanapolycarpe6471 6 месяцев назад

please! can i get the codes?

@ashishpatel6078 Год назад

Thank you so much sir, Can you please tell me how many years of experience you have?

@CodingNepal Год назад

Almost 3 years, I think.

@ashishpatel6078 Год назад

@@CodingNepal How you learn javascript sir?

@diptamoymitra7486 Год назад

Make a automatic sudoku solver ❤️

@CodingNepal Год назад

Okay, I'll think on this topic.

@DjSoundsProduction Год назад

Which software do you use for coding

@CodingNepal Год назад

I use VS Code.

@singh.aditya11 Год назад

Bro, What is Your name?

@ramlaaal Год назад

😮😮😮😮🤩🤩🤩🤩

@GrowToGlow-th4le 6 месяцев назад

sir please give me reply

@harunwarsame3027 Год назад

Plz. Can u do Snake game???

@CodingNepal Год назад

I'll try to make video on it

@harunwarsame3027 Год назад

@@CodingNepal and app making face older. Like faceapp application.

@saimdhefaizandhe872 Год назад

what is the symbol at 18:03

@CodingNepal Год назад

This is back ticks ` ` which is above TAB key on the keyboard.

@uyiosaodemwingie8690 Год назад

I try using the $ symbol in my code , but it’s not working. What could be the problem?

@shiekhpalace2401 Год назад

Please make a recover items functionality in a todo list 😥 i am saying to you for many time

@shiekhpalace2401 Год назад

Brother make recover items functionality please you are giving great

@CodingNepal Год назад

Except for you, no one else has requested a video tutorial on this subject. So, please mail me at contact@codingnepalweb.com, and I'll send the codes according to your needs.

@shiekhpalace2401 Год назад

@@CodingNepal ok i mailed it you if you shall complete it i shall be very thankful to you