Simple Piano App In jQuery - jsRapPiano

Simple Piano App In jQuery - jsRapPiano

jsRapPiano is a jQuery plugin to create a customizable, workable piano app using plain HTML/CSS/JavaScript. You users are able to play the piano using mouse click and touch tap events.

1. Insert the jQuery jsRapPiano plugin's JavaScript and CSS files into the document.

<link rel="stylesheet" href="jsRapPiano.css">
<script src="" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" c
<script src="jsRapPiano.js"></script>

2. To generate a piano on the webpage, call the function on the target element where you want to place the piano.

<div id="example">

3. Customize the octave & octaves.


4. Set the attack time & release time.


5. Customize the wave type.

// custom wave type
let real = new Float32Array([0,-1,0,1]);
let imag = new Float32Array([0,0.2,0,-0.2]);
let wave = audioCtx.createPeriodicWave(real, imag, {disableNormalization: true});

6. Trigger a function when a key is pressed.

  onClick: null

This awesome jQuery plugin is developed by Thibor. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 17.09.2018
  • Source