sanxofon / cross-browser-js-css-mp3-piano-keyboard

Piano Keyboard - HowlerJS/CSS3

Cross-Browser JS-CSS-MP3 Piano Keyboard (Live Demo)

Description

This example displays how to construct a basic Piano Keyboard using howler.js as the engine powering it using sprites.

• Controls: mousedown/mouseup, mouseover/mouseout (if checked)
• Computer keyboard input: 'q', '2', 'w', '3', 'e', 'r', '5', 't', '6', 'y', '7', 'u', 'i',...

How-To

1. Clone the git repo or download the source.
2. Open index.html in your favorite browser.

Author

• Santiago Chavez Novaro (@sanxofon)
• Released under the MIT License.

Credits

• HowlerJS. Copyright (c) 2013-2018 James Simpson and GoldFire Studios, Inc. Released under the MIT License.
• Freely available piano samples originally recorded by University of Iowa Electronic Music Studios.
• CSS3 Piano Keyboard design based on Pure CSS3 Piano by Taufik Nurrohman