Virtual Piano Keyboard With JavaScript – piano.js

Category: Javascript | February 15, 2022
Views Total:2,974 views
Official Page:Go to website
Last Update:February 15, 2022


Virtual Piano Keyboard With JavaScript – piano.js


An extremely lightweight JavaScript library for creating a virtual piano keyboard on the page. As a result, you will be able to play music notes on the keyboard by clicking on different keys of the piano.

The library is implemented in pure JavaScript, no dependencies just plain HTML5 and CSS/CSS3.

How to use it:

1. Load the piano.css and piano.js in the document.

<link rel="stylesheet" href="css/piano.css" />
<script src="js/piano.js"></script>

2. Add piano keys to the page.

<div class="keys">
  <div class="key" data-note="a"></div>
  <div class="key sharp" data-note="w"></div>
  <div class="key" data-note="s"></div>
  <div class="key sharp" data-note="e"></div>
  <div class="key" data-note="d"></div>
  <div class="key" data-note="f"></div>
  <div class="key sharp" data-note="t"></div>
  <div class="key" data-note="g"></div>
  <div class="key sharp" data-note="y"></div>
  <div class="key" data-note="h"></div>
  <div class="key sharp" data-note="u"></div>
  <div class="key" data-note="j"></div>
  <div class="key" data-note="k"></div>
  <div class="key sharp" data-note="o"></div>
  <div class="key" data-note="l"></div>
  <div class="key sharp" data-note="p"></div>
  <div class="key" data-note=";"></div>
<audio src="sounds/a.mp3" data-note="a" preload="auto"></audio>
<audio src="sounds/w.mp3" data-note="w" preload="auto"></audio>
<audio src="sounds/s.mp3" data-note="s" preload="auto"></audio>
<audio src="sounds/e.mp3" data-note="e" preload="auto"></audio>
<audio src="sounds/d.mp3" data-note="d" preload="auto"></audio>
<audio src="sounds/f.mp3" data-note="f" preload="auto"></audio>
<audio src="sounds/t.mp3" data-note="t" preload="auto"></audio>
<audio src="sounds/g.mp3" data-note="g" preload="auto"></audio>
<audio src="sounds/y.mp3" data-note="y" preload="auto"></audio>
<audio src="sounds/h.mp3" data-note="h" preload="auto"></audio>
<audio src="sounds/u.mp3" data-note="u" preload="auto"></audio>
<audio src="sounds/j.mp3" data-note="j" preload="auto"></audio>
<audio src="sounds/k.mp3" data-note="k" preload="auto"></audio>
<audio src="sounds/o.mp3" data-note="o" preload="auto"></audio>
<audio src="sounds/l.mp3" data-note="l" preload="auto"></audio>
<audio src="sounds/p.mp3" data-note="p" preload="auto"></audio>
<audio src="sounds/comma.mp3" data-note=";" preload="auto"></audio>

You Might Be Interested In:

Leave a Reply