For a lark, I hacked together a quick web-based piano keyboard using the <Audio> tag. The Audio tag (along with the Video tag) is part of HTML version 5, and it’s pretty cool, since it makes the audio file just another part of the HTML page rather than something that is stuck in a plug-in ghetto. That means that javascript running in the page can interact with the audio file, which is what makes this piano possible to do without Flash.
The audio files are pure sine waves (e.g. the A above middle C is 440 Hz) generated by Audacity and saved in .ogg format (an open-source encoding).
Unfortunately it will only work in a browser that supports HTML 5 the Audio tag, which as of right now is pretty much only (shameless plug) Firefox 3.5.
August 28, 2009: EDITED TO ADD: The web-based piano has been moved to evilbrainjono.net/music, where I am working on integrating it into a full web-based music composition lab.
June 12, 2009 at 7:51 am
If you used wav-format, it would probably also work in Safari and Chrome. Besides, the audio samples are not that big, you need compression…
June 12, 2009 at 9:36 am
I’ve only tried this on one PC but for some reason it doesn’t seem to play chords very nicely – some sort of harmonic beat effect perhaps?
June 12, 2009 at 9:58 am
Oh, how I missed computer speaker quality audio🙂
Next step would be to put all notes into the same OGG file, to save on HTTP requests. To play a note one could jump to a location in the file where the note starts and play it until the button is released (or until a maximum time interval is reached, a piano won’t play forever either).
June 12, 2009 at 10:39 am
There are at least 4 browsers that support PARTS of HTML 5. No browser, including Fx 3.5, supports full set of HTML 5 features. Fx 3.5 only happens to support audio tag.
Nevertheless, the demo is very nice.
June 12, 2009 at 11:21 am
Whoa, that’s freaky timing. Two nights ago I was thinking of doing the same thing for drums. But the piano seems to have been the better choice – good job🙂
(Oddly, I had a similar experience with Dietrich earlier today as well.)
June 12, 2009 at 5:39 pm
The Ogg files have clicky sounds in them, at least for me (using Firefox trunk on Mac).
For example, http://evilbrainjono.net/music/c4.ogg has a clicky sound 30% of the way through and also at the end.
June 12, 2009 at 6:23 pm
lockoom: Corrected. Thanks.
June 12, 2009 at 6:28 pm
You can find out more about levels of HTML 5 support in various browsers here:
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML_5%29
It looks like Opera is the clear leader.
June 12, 2009 at 10:13 pm
Jono, you need to return false in your event handlers, or else any default action for the keypress by the UA will happen. This rather severely horks Find As You Type, for example. You also should make sure no modifier keys are held down when a keypress is detected — for example, try viewing source on the page using the keyboard shortcut. 🙂
June 12, 2009 at 10:22 pm
You probably also want to make each audio file loop when played, for those who like playing whole notes. 🙂
June 12, 2009 at 11:06 pm
re ghettos and prisons: It would be nice if browser vendors increased plugin integration and openness, rather than try to reinvent their own wheel….
Congrats on your project. Watch out for latency and mixing issues, particularly across runtimes.
jd/adobe
June 13, 2009 at 9:06 pm
@jonoscript:
Not really. Opera wins on Web Forms 2.0, Gecko on the rest, according to your link.
June 14, 2009 at 7:38 pm
Safari 4 works, at least on mac.🙂
August 10, 2009 at 1:53 am
It’s very impressive that you can do this- However- there is nothing that beats the real thing in my opinion. I don’t know why but even the top model electric pianos just seem to be ,missing something. Having said that- some music on the web is way better than none at all.
Cheers
August 21, 2009 at 12:50 am
It is pretty cool that you can make an audio file this way. Your knowledge is definitely above my “pay grade”. I do have to agree with Joe though,I find electric pianos misssing the richness of a real piano.
August 30, 2009 at 5:19 am
[…] Web-based piano made possible by <Audio> tag « Not The User's Fault […]
March 2, 2010 at 7:17 pm
I am running firefox 3.6 on Ubuntu (8.10). Browser cannot find the required plugin. Without the plugin, it plays the notes, but each note only once. After that page needs to be reloaded.
I like the idea very much. Hopefully you are making progress on your project to build a complete lab.