Author: | isbendiyarovanezrin |
---|---|
Views Total: | 3,138 views |
Official Page: | Go to website |
Last Update: | February 15, 2022 |
License: | MIT |
Preview:

Description:
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> </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>