Stylophone: try before you buy
Experimenting with the Web Audio API. The Stylophone provides a nice and easy to follow example.
Sorry, but there's no keyboard, or touch device, support at present. Maybe in future…
The keyboard is an SVG overlaid on the graphic. The
rect make up the major keys while
polyline are used for the sharps and flats.
The frequency of each note is stored as a data attribute attached to each key. The frequency values were taken from a Reverse Engineered Stylophone readings.
As yet unpolished, almost raw. Couldn't be much simpler.
The play and stop functions were robbed wholesale from Web Audio Stylophone. Though they were amended to work with modern syntax and the reliance on the Raphael vector library was completely removed.
Event delegation to cover all the SVG keys.
- Add keyboard support, not accessible without.
- Add touch support, just to be nice.
- Maybe change the cursor to a stylus? A bit cumbersome though.
- A detune rotary wouldn't hurt either.
- Add vibrato switch to finish the emulation.
- Explore custom oscillator waveforms for a more accurate sound.
- Possibly extend further with chorus / echo / reverb and volume control?