Create a Piano Using JavaScript
Welcome to the Codewithrandom blog. In this blog, We’ll learn how to create a Piano Using JavaScript. We use HTML for creating a structure for the piano keyboard and styling using CSS, giving the piano effect on buttons, and did the same color of the piano using css. lastly, we use JavaScript for Piano keyboard sound play functionality.
I hope you enjoy our blog so let’s start with a basic html structure for a Piano.
<body> <section id="wrap"> <header> <h1>JS Piano</h1> <h2>Use your keyboard. Hover for hints.</h2> </header> <section id="main"> <div class="nowplaying"></div> <div class="keys"> <div data-key="65" class="key" data-note="C"> <span class="hints">A</span> </div> <div data-key="87" class="key sharp" data-note="C#"> <span class="hints">W</span> </div> <div data-key="83" class="key" data-note="D"> <span class="hints">S</span> </div> <div data-key="69" class="key sharp" data-note="D#"> <span class="hints">E</span> </div> <div data-key="68" class="key" data-note="E"> <span class="hints">D</span> </div> <div data-key="70" class="key" data-note="F"> <span class="hints">F</span> </div> <div data-key="84" class="key sharp" data-note="F#"> <span class="hints">T</span> </div> <div data-key="71" class="key" data-note="G"> <span class="hints">G</span> </div> <div data-key="89" class="key sharp" data-note="G#"> <span class="hints">Y</span> </div> <div data-key="72" class="key" data-note="A"> <span class="hints">H</span> </div> <div data-key="85" class="key sharp" data-note="A#"> <span class="hints">U</span> </div> <div data-key="74" class="key" data-note="B"> <span class="hints">J</span> </div> <div data-key="75" class="key" data-note="C"> <span class="hints">K</span> </div> <div data-key="79" class="key sharp" data-note="C#"> <span class="hints">O</span> </div> <div data-key="76" class="key" data-note="D"> <span class="hints">L</span> </div> <div data-key="80" class="key sharp" data-note="D#"> <span class="hints">P</span> </div> <div data-key="186" class="key" data-note="E"> <span class="hints">;</span> </div> </div> <audio data-key="65" src="http://carolinegabriel.com/demo/js-keyboard/sounds/040.wav"></audio> <audio data-key="87" src="http://carolinegabriel.com/demo/js-keyboard/sounds/041.wav"></audio> <audio data-key="83" src="http://carolinegabriel.com/demo/js-keyboard/sounds/042.wav"></audio> <audio data-key="69" src="http://carolinegabriel.com/demo/js-keyboard/sounds/043.wav"></audio> <audio data-key="68" src="http://carolinegabriel.com/demo/js-keyboard/sounds/044.wav"></audio> <audio data-key="70" src="http://carolinegabriel.com/demo/js-keyboard/sounds/045.wav"></audio> <audio data-key="84" src="http://carolinegabriel.com/demo/js-keyboard/sounds/046.wav"></audio> <audio data-key="71" src="http://carolinegabriel.com/demo/js-keyboard/sounds/047.wav"></audio> <audio data-key="89" src="http://carolinegabriel.com/demo/js-keyboard/sounds/048.wav"></audio> <audio data-key="72" src="http://carolinegabriel.com/demo/js-keyboard/sounds/049.wav"></audio> <audio data-key="85" src="http://carolinegabriel.com/demo/js-keyboard/sounds/050.wav"></audio> <audio data-key="74" src="http://carolinegabriel.com/demo/js-keyboard/sounds/051.wav"></audio> <audio data-key="75" src="http://carolinegabriel.com/demo/js-keyboard/sounds/052.wav"></audio> <audio data-key="79" src="http://carolinegabriel.com/demo/js-keyboard/sounds/053.wav"></audio> <audio data-key="76" src="http://carolinegabriel.com/demo/js-keyboard/sounds/054.wav"></audio> <audio data-key="80" src="http://carolinegabriel.com/demo/js-keyboard/sounds/055.wav"></audio> <audio data-key="186" src="http://carolinegabriel.com/demo/js-keyboard/sounds/056.wav"></audio> </section> </section> <video playsinline autoplay muted loop id="bgvid" poster="http://carolinegabriel.com/demo/js-keyboard/video/bg.jpg"> <source src="http://carolinegabriel.com/demo/js-keyboard/video/bg.mp4" type="video/mp4"> </video> </body>
There is all the html code for the Piano. Now, you can see output without Css and JavaScript. then we write Css for styling the piano and use JavaScript for the Piano play sound functionality.
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
Output
CSS Code For Piano
html {
background: #000;
font-family: 'Noto Serif', serif;
-webkit-font-smoothing: antialiased;
text-align: center;
}
video#bgvid {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
background-size: cover;
}
header {
position: relative;
margin: 30px 0;
}
header:after {
content: '';
width: 460px;
height: 15px;
background: url(images/intro-div.svg) no-repeat center;
display: inline-block;
text-align: center;
background-size: 70%;
}
h1 {
color: #fff;
font-size: 50px;
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
margin: 0;
}
h2 {
color: #fff;
font-size: 24px;
font-style: italic;
font-weight: 400;
margin: 0 0 30px;
}
.nowplaying {
font-size: 120px;
line-height: 1;
color: #eee;
text-shadow: 0 0 5rem #028ae9;
transition: all .07s ease;
min-height: 120px;
}
.keys {
display: block;
width: 100%;
height: 350px;
max-width: 880px;
position: relative;
margin: 40px auto 0;
cursor: none;
}
.key {
position: relative;
border: 4px solid black;
border-radius: .5rem;
transition: all .07s ease;
display: block;
box-sizing: border-box;
z-index: 2;
}
.key:not(.sharp) {
float: left;
width: 10%;
height: 100%;
background: rgba(255, 255, 255, .8);
}
.key.sharp {
position: absolute;
width: 6%;
height: 60%;
background: #000;
color: #eee;
top: 0;
z-index: 3;
}
.key[data-key="87"] {
left: 7%;
}
.key[data-key="69"] {
left: 17%;
}
.key[data-key="84"] {
left: 37%;
}
.key[data-key="89"] {
left: 47%;
}
.key[data-key="85"] {
left: 57%;
}
.key[data-key="79"] {
left: 77%;
}
.key[data-key="80"] {
left: 87%;
}
.playing {
transform: scale(.95);
border-color: #028ae9;
box-shadow: 0 0 1rem #028ae9;
}
.hints {
display: block;
width: 100%;
opacity: 0;
position: absolute;
bottom: 7px;
transition: opacity .3s ease-out;
font-size: 20px;
}
.keys:hover .hints {
opacity: 1;
}Portfolio Website using HTML and CSS (Source Code)
Here is our updated output Html + Css.
Output
Output
JavaScript Code For Piano
const keys = document.querySelectorAll(".key"),
note = document.querySelector(".nowplaying"),
hints = document.querySelectorAll(".hints");
function playNote(e) {
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`),
key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
if (!key) return;
const keyNote = key.getAttribute("data-note");
key.classList.add("playing");
note.innerHTML = keyNote;
audio.currentTime = 0;
audio.play();
}
function removeTransition(e) {
if (e.propertyName !== "transform") return;
this.classList.remove("playing");
}
function hintsOn(e, index) {
e.setAttribute("style", "transition-delay:" + index * 50 + "ms");
}
hints.forEach(hintsOn);
keys.forEach(key => key.addEventListener("transitionend", removeTransition));
window.addEventListener("keydown", playNote);Now we have completed our Piano. Here is our updated output with JavaScript.
10+ HTML CSS Projects For Beginners with Source Code
Final Output Of Piano Using JavaScript
Hope you like the Piano and Piano Music. you can see the output video and project Screenshot. See our other blogs and gain knowledge in front-end development.
In this post, We learn how to create a Piano using HTML, CSS, and JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)
Thank you for visiting!
Written by – Code With Random/Anki
Codepen by – Caroline Gabriel
