Build A Playable PIANO in HTML CSS & JavaScript | Virtual Piano 🎹 in JavaScript
HTML-код
- Опубликовано: 20 май 2024
- 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...
Please don't change from this type of content. RUclips 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
I'm learning a lot of from you thank you so much keep this great job up
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
Your content is amazing helps me learn css and JavaScript ❤ your styling is just so good 🎉
Happy to hear that :)
@@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
Thank you for this. Looks amazing
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.
Great work brother looking forward for more exciting project keep up
간결하고 유용한 코드입니다. 정말 멋집니다.
Amazing project 🔥🔥
Thanks , So beautiful
Thanks. It Helps me Learn FrontEnd Development
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!)
Thanks for the suggestion :)
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
Extraordinary boss
Thank you so much easy tutorial
you best guy with the powerfull brian
Beautiful work brother
Thanks brother
Wow great design
Very nice work, Thank you for sharing!
You're welcome
Thank you so much. It help me lot
Amazing 😍😍😍😍😍😍
Awesome, nice
Amazing work. Fantastic job!👏👏👏👌
Can you try a guitar😃
Great work. For mobile responsive can u just rotate the screen?
a cool piano😮❤
great sir
I love this channel 💗💗💗
Keep loving
Very good , Thanks UZB DEVLOPER
mksh om berkah berlimpah
Awesome
Excelent, congratulations!
Many thanks!
Thanks
so good
hello bro I watched your video first time and really love it
Thanks and welcome
Good video.
Great work,,, brother 😍😍😍
Thanks you!
Bhai live cricket score app banaiye plz... Love from Bangladesh....💝💝
Amazing Video Brother
Thanks brother
but this is such a nice tutorial
superb!
Thanks!
what fonts were you using?
მადლობა :დდდ
which screen recorder do you use
Brother where is the best institute to learn coding in Nepal?
where is the link of the voices to download it please
So great
Thanks!
now we all can put this to resume !
😲, really I can't believe, sir, why you can't make a css and JS course, I would really love it
I'll think about courses.. Stay tuned!
amazing
Thanks!
hello codingnepal i have a problem why if me want the play the audio he dont work'it
Unable to download audio please update the link
i copy a same code but computer is giving error (Open a folder or workspace... (File -> Open Folder)
Which software do you use for coding
I use VS Code.
U are my mentor in programming but brother please try to use voice to explain but good content bro
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.
Thank you so much sir,
Can you please tell me how many years of experience you have?
Almost 3 years, I think.
@@CodingNepal How you learn javascript sir?
tôi addEventLisstener keydown nhưng không được , nó không add class active vào element của tôi
It will be a more useful video if you add your voice explaining the code instead of this music.
Make a automatic sudoku solver ❤️
Okay, I'll think on this topic.
How can I master JavaScript
Can you make course on web development please
I'll think about courses.. Stay tuned!
amazing, but how did u do that cursor move in 15:45 ? what is the shortcut?
Where is the explanation, there is only code in the video
please! can i get the codes?
😮😮😮😮🤩🤩🤩🤩
Plz. Can u do Snake game???
I'll try to make video on it
@@CodingNepal and app making face older.
Like faceapp application.
Please make a recover items functionality in a todo list 😥 i am saying to you for many time
Brother make recover items functionality please you are giving great
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.
@@CodingNepal ok i mailed it you if you shall complete it i shall be very thankful to you
Bro, What is Your name?
what is the symbol at 18:03
This is back ticks ` ` which is above TAB key on the keyboard.
I try using the $ symbol in my code , but it’s not working. What could be the problem?
Bro you learn React JS
I know React
Sir pls make chess game
Okay, I'll try to make video on it.
sir please give me reply
white-black pattern: wbwbwwbwbwbwwbwbw. w = white, b = black;
The things I can built with React I can do same in vanilla Js so I realized I'm a bad developer
Can I have your source code please ?
Here is the source codes link: www.codingnepalweb.com/playable-piano-html-css-javascript/
Dai tapi ko euta help chaiyo please dai😭😭😭
How can I help you brother?
are You studying???