Jpiano

jPiano, our quaint little jQuery plugin crafted back in 2011, charmingly converts a humble keyboard into a delightful virtual piano. This nifty tool employs the esteemed Sound Manager 2 for its audio prowess. Setting it up is a breeze: a spot of scripting to initialise the plugin on your chosen element, say $("#piano").jPiano({...}), and voilà!

The plugin is wonderfully adaptable yet pleasingly straightforward. It boasts features like choosing between Flash and HTML5 for audio playback, specifying a bespoke directory for your sound files, and a debug mode to smooth out any pesky wrinkles during development. Moreover, jPiano allows for the personalisation of key-to-note assignments, enabling the assignment of specific sound files to keyboard keys. For instance, the letter "a" could play "C.wav", "w" might give you "CS.wav", and so forth.

This little gem is a boon for web developers aiming to sprinkle a bit of interactive musical charm on their web pages. It’s a splendid way to bring a touch of nostalgia and joy to website visitors, allowing them to tinkle the ivories of a virtual piano with nothing but their computer keyboards. Ah, the fond memories of simpler times!

How to use

$("#piano").jPiano({
    preferFlash: false,
    soundsDir: "sounds/",
    debug: true,
    defaultPressCallback: test,
    keySounds: {
      "a": ["C.wav", "#key_01"],
      "w": ["CS.wav", "#key_02"],
      "s": ["D.wav", "#key_03"],
      "e": ["DS.wav", "#key_04"],
      "d": ["E.wav", "#key_05"],
      "f": ["F.wav", "#key_06"],
      "t": ["FS.wav", "#key_07"],
      "g": ["G.wav", "#key_08"],
      "y": ["GS.wav", "#key_09"],
      "h": ["A.wav", "#key_10"],
      "u": ["AS.wav", "#key_11"],
      "j": ["B.wav", "#key_12"],
      "k": ["2C.wav", "#key_13"],
      "o": ["2CS.wav", "#key_14"],
      "l": ["2D.wav", "#key_15"]
    }
});

Snapshot from a precious revision sent by my esteemed friend Onur - a cherished memory from the development of jPiano