Simple Piano App In jQuery - jsRapPiano

Simple Piano App In jQuery - jsRapPiano
File Size: 5.99 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

How to use it:

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

<link rel="stylesheet" href="jsRapPiano.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" c
        rossorigin="anonymous"></script>
<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">
</div>
$(function(){

  $('#example').jsRapPiano();

});

3. Customize the octave & octaves.

$('#example').jsRapPiano({
  octave:3,
  octaves:2
});

4. Set the attack time & release time.

$('#example').jsRapPiano({
  attackTime:0.04,
  releaseTime:0.5,
});

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});
oscillator.setPeriodicWave(wave);
$('#example').jsRapPiano({
  waveType:'square'
});

6. Trigger a function when a key is pressed.

$('#example').jsRapPiano({
  onClick: null
});

Changelog:

2018-11-24

2018-10-24

  • JS update

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