
HTML5 Piano - danso
http://mrcoles.com/piano/
======
runn1ng
It's nice you can do something in HTML5 that you could have done in Flash 10
years ago.

(Of course, I know, this is all according to standards and all. But still.)

~~~
droidist2
The sad part is you really still can't do this in HTML5, not if you want it to
run on the most popular smartphone platform (Android).

~~~
chaser7016
Give it about a month and Chrome for Android will provide web audio API
support. It's currently in chrome for android beta

Our web app that plays audio in sync on multiple devices works in iOS, Chrome
(non mobile) & Firefox Aurora. Were eagerly awaiting for the newest Chrome for
Android to drop.

~~~
droidist2
That's good news! What I really want though is to run it inside a WebView
rather than just a mobile web app. I feel this gives more control over the
experience, screen real estate, monetization options, and deeper integration
with the device's hardware features.

------
mrcoles
hey everyone, I didn't see that this had been posted until now—I wrote this as
a fun little experiment with audio in the browser. The main hack here was to
generate .wav files at the byte level directly in JavaScript by using data
URIs. If you want better quality sounds, I suggest using the actual audio APIs
that different browsers have exposed. Also, I think the interface came out
pretty neat and the CSS for the keys is pretty nice :)

Feel free to ask any questions or suggest any changes. As @danso pointed out,
this is the repo [https://github.com/mrcoles/javascript-
piano](https://github.com/mrcoles/javascript-piano)

------
ronyeh
Chrome Canary has basic support for MIDI in/out:

[https://plus.google.com/+ChrisWilson/posts/cs4J6sS9qmJ](https://plus.google.com/+ChrisWilson/posts/cs4J6sS9qmJ)

You download the experimental browser, then turn on this flag:

chrome://flags/#enable-web-midi

You can get events by plugging in your USB MIDI keyboard and loading a browser
page with this code:

[http://pastebin.com/ZipfybfZ](http://pastebin.com/ZipfybfZ)

I've verified this with my Casio keyboard, and the webpage can receive events
when I play. It can also play audio out through my Casio's speakers.

This will open up a whole new type of website, where you can plug in your
instrument and jam with friends, or learn along with a tutorial visualization
or video.

~~~
BHSPitMonkey
> This will open up a whole new type of website, where you can plug in your
> instrument and jam with friends

Even replacing audio with MIDI, the network latency imposed by even the speed
of light is too great for simultaneous jamming with friends in other places.
Heck, it's even an issue for marching bands -- the difference between the
speeds of light and sound across even a football field requires special
attention in order to keep things sounding together for the people in the
stands.

The only good solution I've seen for this is NINJAM[0], a protocol for online
jamming where, instead of trying to fight latency, the creators changed the
problem. By enforcing a uniform tempo and number of beats per phrase (inside
of which a repeating chord progression must fit), people can jam together by
playing to what the other people played n beats ago, and everybody else will
hear you n beats late.

I started working on a browser-based client for this protocol a while ago[1],
though I unfortunately put it on the back burner before figuring out proper
vorbis encoding/decoding in JS. A MIDI adaptation of this could prove to be
quite fun, and I think my client (if ever finished) could actually benefit a
bit from some MIDI integrations already present in some existing clients as
well. Thanks for bringing it to my attention.

[0] [http://www.cockos.com/ninjam/](http://www.cockos.com/ninjam/) [1]
[https://github.com/BHSPitMonkey/ninjam-
js](https://github.com/BHSPitMonkey/ninjam-js)

------
bashevis
Very nice! I made an HTML 5 multiplayer piano that lets you play with others
in realtime: [http://www.bandwithfriends.com](http://www.bandwithfriends.com)

Try it out!

~~~
dylz
Just fyi, ___ with friends is owned by zynga and you may or may not get
UDRP'd/C&D'd or some other terrible thing

------
Mpdreamz
Self promotion:
[https://github.com/Mpdreamz/html5-piano](https://github.com/Mpdreamz/html5-piano)

Same concept but allows you to pick chords.

I let the html5piano.com domain expire but its still up on Azure:

[http://html5piano.azurewebsites.net/](http://html5piano.azurewebsites.net/)

------
Miyamoto
It would be cool if there was a way to convert piano sheet music to QWERTY so
you could play piano on a QWERTY piano (if a good QWERTY piano actually
exists). Then everyone could play piano!

~~~
mrcoles
That’s a fun idea. I directly used the existing keyboard mapping that
garageband employs for keyboard to piano in their app, which tries its best to
mimic a piano.

There are lots of things that make actual QWERTY piano difficult, e.g., fewer
keys than notes on a piano, hitting complex chords would be very difficult
(regular typing doesn't train you to type entire words in a single combined
press of keys), computer keyboards have no benefits of weighted keys—but
perhaps at least one note a time melodies could be played pretty proficiently
by non-musicians with a QWERTY player?

------
tantalor
I understand the sound data are generated by JavaScript. How many distinct
sounds are generated? How much space is required to store this data? Are the
notes of a chord combined by JavaScript or the browser?

~~~
mrcoles
Each note is generated as a separate sound file when the piano first loads.
They're all short wave files. So when you hit a bunch of notes at once, it's
just playing several sound files at once.

If you click the square in the upper right, you'll get options to change the
waveform and volume response. There are some other options too, like shifting
by an octave or changing the color of the piano :)

Better things could be done by using the web audio APIs, but I explicitly
started this project wanting to build audio using data URIs.

~~~
tantalor
Could you improve the loading performance by precomputing the wave files? I'm
thinking you could slam the data URIs together in a compressed blob.

------
skybrian
Here's one I wrote in Dart: [http://skybrian.github.io/dart-synth-
demo/synth.html](http://skybrian.github.io/dart-synth-demo/synth.html)
[https://github.com/skybrian/dart-synth-
demo](https://github.com/skybrian/dart-synth-demo)

Which was based on this one in JavaScript:
[https://github.com/skybrian/midiplayer](https://github.com/skybrian/midiplayer)

------
acidx
A few years ago myself and a friend wrote a simulator for a 90's toy called
"Smart Start" ("Pense Bem" in Brazil), which has a crude piano (square wave
only) mode as well.

It is still online at
[http://labs.hardinfo.org/pb/](http://labs.hardinfo.org/pb/).

To play, turn it on (green button), then press "Memória Tons" (third button
from the right in the last row).

------
ronyeh
Previous discussion:

[https://news.ycombinator.com/item?id=3993516](https://news.ycombinator.com/item?id=3993516)

------
dfritsch
Very neat! I feel like it needs support for "sustain" based on holding the key
or on mouse down.

------
thrusong
I've been working on something similar at
[http://thrusong.com-](http://thrusong.com-) you can plot out your notes on a
grid and generate a studio quality riff with any VST instrument plugin. It's
built for social songwriting.

------
Andrex
This was great to mess with on my Chromebook Pixel's touch screen! Just makes
me wish there were a way to force multitouch instead of two finger taps always
brings up the context menu.

------
przemoc
This HTML5 Piano has a terrible latency, at least in my Chrome 30 @ wheezy64
on Athlon 64 X2 4600+.

\---

Relevant: [http://www.jamwithchrome.com/](http://www.jamwithchrome.com/)

------
mgraczyk
It's cool sites like this that remind me why I still use a PS/2 Keyboard.
Anybody else out there push all the keys at once just to make sure it would
work?

~~~
mrcoles
yeah, it can play more notes at once than an iphone screen could!

------
danso
BTW here's the OP's Github repo:

[https://github.com/mrcoles/javascript-
piano](https://github.com/mrcoles/javascript-piano)

------
cenhyperion
One of my friends coded up something like this, except you can play with the
keys on your keyboard and it sounds like a piano. Very cool!

~~~
ChuckMcM
Press the right most rectangle on the top to enable "play by keyboard" mode. I
agree it is very cool.

~~~
cenhyperion
Oh awesome, I missed that! This one's better designed :)

------
chaser7016
iOS supports the web audio API solidly & can be used to get sound working in
this app

Here are two web audio API example apps... [http://sleep.fm](http://sleep.fm)
(online alarm clock; view on iOS device)

And

[http://speakerblast.com](http://speakerblast.com) \- blast audio in sync on
multiple devices

Anyone know other web apps that heavily use the web audio API?

~~~
mrcoles
Oh, nice to know and cool products!

I wrote this web app in May 2012—I don’t think iOS was there yet? I’m open to
a pull request though [https://github.com/mrcoles/javascript-
piano](https://github.com/mrcoles/javascript-piano) but since the project was
mainly a test for generating different wave files as dataURIs (and the piano
was an afterthought that was actually spawned from this half-baked idea
[http://mrcoles.com/media/test/guy/](http://mrcoles.com/media/test/guy/) ),
idk if the dataURI approach is any easier on iOS yet (or ever will be)?

------
moron4hire
are you generatimg the samples on each key press or when the piano loads?
audio api or base65 url encoded wave files? I had made a synthesizer a while
ago, but could never figure out how to keep the audio from clicking

[http://wedusc.com/synth/index.html](http://wedusc.com/synth/index.html)

~~~
kmf
According to the repo ([https://github.com/mrcoles/javascript-
piano](https://github.com/mrcoles/javascript-piano)):

> This is an HTML5 synth piano that generates all of its audio files on the
> fly using data URIs.

The audio.js shows this process in a bit more detail:

[https://github.com/mrcoles/javascript-
piano/blob/master/audi...](https://github.com/mrcoles/javascript-
piano/blob/master/audio.js)

~~~
mrcoles
hrm… maybe my wording wasn’t as clear as I had hoped. It generates the audio
ahead of time (as base64 dataURI wave files)—the on-the-fly part is that it’s
generated in JavaScript each time you make changes to the settings, like wave-
form and volume response (click on the square in the top right or type "?" to
see changeable options).

I assume the audio APIs would make less click-y sounds (and don't suggest
manually created wave files as a solid way to create perfect sounds), but I
also sort of like the clicks. When I presented this at Hack and Tell NYC, I
_claimed_ that you had to play it in Firefox 12 to get hear the exact clicks
that were originally intended in the product ;?j

------
yuvalo
Just had my morning coffee and my kid wanted some attention. He really enjoyed
it. Thanks

------
wavesum
This piano has a bit sinewavish sound to my liking, but ofc can't argue taste
(:

~~~
mrcoles
try some of the other styles and volume responses by clicking on the square in
the top right or hitting "?"—to be fair, everything sounds a lot more synth
than real… but that wasn't my goal in building this project.

------
Mindless2112
;p;p;jlkh

Some days I wish I'd learned how to play the piano.

~~~
PurplePanda
start learning?

~~~
Mindless2112
Unfortunately there's not enough time to learn everything I want to learn.

------
spyder
and there is [http://multiplayerpiano.com](http://multiplayerpiano.com)

------
frozenport
Project Request: Make a Haken Continuum

------
monsterix
Nice!

Would be so cool to create a full 88 keys digital piano on a flat piece of
glass with a touch layer. No edges, but for the well rounded toughened glass
with see through.

Simulated weighted keys using software, have modes (Strings is a must!), basic
metronome, equalizer, controls and additional synth effects; and well on top
of that a custom built browser to suit the window size of 58.8 x 12.8 x 22.2
inches! :D

~~~
colmmacc
It would be cool, and it may be ok for certain kinds of playing, but a subtle
mordent, a tasteful triplet or a good arpeggio all depend on feedback from the
keys. I think this is more than muscle memory and that "simulating" the sound
will never do, a mordent in particular depends on a very mechanical
relationship between adjacent keys rising and falling.

There's a reason most band pianists haul around electric pianos with heavy
weighted keys rather than cheaper keyboards that contain the same sound
synthesis engine.

~~~
noonespecial
They were _trained_ on this type of gear, so they are most expressive with it.
A lifetime of muscle memory can't be undone. What about children who are just
beginning today? I'm looking forward to a new generation of musicians whose
native instrument is the touch panel. It seems odd to interface with modern
technology using an 18th century physical interface. Its neat to watch
Deadmau5 "play" his setup. I can only image what children born today will be
doing when they are in their 20's.

~~~
roryokane
The old physical interfaces aren’t surpassed yet. Physical interfaces have the
advantage of sending feedback through touch. Piano keys that push up harder
when you press harder help you notice how hard you’re playing, and keys that
depress discretely help you aim your fingers away from the lines between keys
so you are less likely to miss.

Of course, the ideal situation is a mix of electronic devices’ flexibility and
physical keyboards’ feedback. That could be something like a touch screen that
can raise and lower physical bumps on it to feel like keys, or vibrate with
different strengths in different places to provide feedback to each finger.
But we don’t have that technology yet.

~~~
fhars
The other idea is to put more sensors on the physical keys. Turns out, there
is a kickstarter for that (just stumbled on it, don't know how legit it is):
[http://www.kickstarter.com/projects/instrumentslab/touchkeys...](http://www.kickstarter.com/projects/instrumentslab/touchkeys-
multi-touch-musical-keyboard)

~~~
roryokane
Wow, I’ve met the creator of that Kickstarter before. I went to a free concert
at Temple University where he demoed his “magnetic resonator piano” instrument
([http://music.ece.drexel.edu/research/mrp](http://music.ece.drexel.edu/research/mrp)),
which is kind of a more-limited acoustic version of the device in that
Kickstarter. From talking to him after the concert and seeing what he’s
produced, I don’t doubt that that Kickstarter is legit.

