Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

HTML5 Piano

mrcoles.com

Post reply on HN
Print view View original

31–40 of 68 posts

Re: HTML5 Piano

#31

Post by 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

Re: HTML5 Piano

#32

Post by mrcoles »

kmf wrote: post #28
moron4hire wrote: post #13

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

According to the repo ( 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...

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

Re: HTML5 Piano

#33

Post by mrcoles »

mgraczyk wrote: post #23

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?

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

Re: HTML5 Piano

#34

Post by mrcoles »

wavesum wrote: post #21

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

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.

Re: HTML5 Piano

#35

Post by mrcoles »

chaser7016 wrote: post #4

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 (online alarm clock; view on iOS device) And http://speakerblast.com - blast audio in sync on multiple devices Anyone know other web apps that heavily use the web audio API?

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 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/ ), idk if the dataURI approach is any easier on iOS yet (or ever will be)?

Re: HTML5 Piano

#37

Post by ronyeh »

Chrome Canary has basic support for MIDI in/out:

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

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.

Re: HTML5 Piano

#38

Post by mrcoles »

Miyamoto wrote: post #17

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!

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?

Re: HTML5 Piano

#39

Post by mrcoles »

ronyeh wrote: post #37

Chrome Canary has basic support for MIDI in/out: 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 I've verified this with my Casio keyboard, and the webpage can receive events when I play. I…

That is awesome! Despite all the fun I had making this "html5 piano", for electronic pianos, you really can't beat having an actual midi device with weighted keys. I’m looking forward to all the future awesomeness with audio and web—its current state is really frustrating, but it keeps slowly getting better.

Re: HTML5 Piano

#40

Post by roryokane »

noonespecial wrote: post #20
colmmacc wrote: post #19

Earlier quoted context omitted.

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 piano…

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 imag…

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.

Post reply on HN