Plugging a keyboard or drum pads into your Web browser is now a thing.
One month ago, we first saw hardware MIDI support in Chrome. That was a beta; this week, Google pushed it out to all Chrome users.
So, what can you actually do with this stuff? Well, you can open a Web tab and play a synth on actual hardware, which is pretty nifty.
Support is still a little dicey, but the available examples are growing fast. Here are some of the coolest, in addition to the MIDI example and demo code we saw last month.
The examples are certainly promising, but you may want to temper expectations. Users of browser-based solutions built on Flash will find some of this old news. Audiotool, for one, has already had a really sophisticated (semi-modular, even) production tool running for some years. (It’s relevant here that Audiotool is coming to the HTML5/MIDI support, but it isn’t here yet.) And while open standards are supposed to mean more compatibility, in practice, they are presently meaning far less. Even though Safari and Chrome are pretty close to one another in rendering pages, I couldn’t get any of these examples working properly in any browser other than Chrome. And while I could get pretty low-latency functionality, none of this is anywhere near as solid in terms of sound performance as any standalone music software.
So, that leaves two challenges. One, the implementation is going to have to improve if non-developers are going to start to use this. And two, if this stuff is going to see the light of day beyond music hackathons, it’ll need some applications. That said, I could imagine educational applications, demos of apps, collaborative possibilities, and more – and those expand if the tech improves. And, of course, this also gets really interesting on inexpensive Chromebooks – which it seems are selling in some numbers these days.
But that’s the future. Here are some of the things you can do right now:
Audiotool is coming to HTML5, and Heisenberg is here now. Heisenberg is I think the coolest option yet – more than just a tech demo, you can plug in a MIDI keyboard and it’s a really fun, free browser synth. Given the amount of pleasure we’ve gotten out of the odd Web time-waster, this is serious business.
But that’s just the appetizer. The team behind Audiotool are working on porting it to HTML5. That should be an excellent test of just how mature this technology is. Audiotool is great and – Flash or not – it’s worth having a play with if you are the kind of person who gets some inspiration from new software toys. (And if you’re reading this far, I suspect you are.)
http://www.audiotool.com/product/device/heisenberg/
http://www.audiotool.com/app [Flash for now, including screenshot above]
Revisit Roland. Steven Goldberg’s 106.js reimagines the classic Roland Juno-106 in JavaScript. And it’s just added MIDI support. Plus you can check the code out, free.
Play a 60s Yamaha combo organ. The oddest of this bunch is also my favorite sonically, just because it’s so quirky. The Foo YC20 is an emulation of Yamaha’s 1969 organ, the YC-20 combo – “features and flaws” all included. And now it feels more like an organ, since you can connect a MIDI keyboard.
Users should like it: if you’re not fond of running it in your browser, you can also run it as a VST plug-in for Mac or Windows or standalone or as an LV2 plug-in on Linux.
Developers will like it, too: apart from some surprisingly authentic open source recreations, it’s all coded in the Faust programming language, a functional language for DSP.
http://foo-yc20.codeforcode.com
Run a full modular DAW. No need to wait on Audiotool: app.hya.io is already a full-featured semi-modular DAW built in HTML5 with MIDI support (and audio input). It’s got a full assortment of instruments and effects, too – and some interesting ones, so it complements Audiotool.
Run a bunch of microtonal synths. Mitch Wells’ Web Synths is a deep microtonal instrument, capable of some unique sound designs, and perhaps the richest actual synth of this bunch. Patch sharing shows one powerful feature of putting browsers on the Web – the ability to share with others.
Live-code your own synth. Maybe this is the application that makes the most sense. While it’s tough for the other proof-of-concept toys to compete with your desktop instruments, it’s kind of tough to beat the ability to live-code with Web tech in a browser.
And by “code,” you hardly have to be a hard-core coder. The coding is radically simplified here, spitting out JavaScript from basic commands – fun for even the most entry-level hacker to play around with.
Vult by Leonardo Laguna Ruiz was built at MIDIHACK, the hackathon I was part of here in Berlin this month.
http://modlfo.github.io/vult/demo.html
Play a synth – with colored lights and more. Synthy.io is a three-oscillator synth with some interesting extras. There’s a tracker-sequencer built in, and you can play a “live” mode with color output.
The nerdy stuff behind the scenes demonstrates some potential for other projects. Apart from the new MIDI mode, the server mode offers up other possibilities. (socket.io, Node.js, live server, NeDB database holding patterns, if you’re curious.)
What does that mean in practice? Developer Filip HnÃzdo writes in comments:
“One of the features I’m most proud of is the live websocket server so any pattern that gets pushed to it is played live to a page where anyone can hear what anyone else has created in realtime. Especially fun with MIDI routed into soft synths or hardware. If enough people pushed patterns in you could just leave it on in your bedroom and constantly hear new music as it arrives. The patterns are all encoded as URLS too so easy to share.”
Having just read a history of the first networked, first first-person shooter in the 70s, it’s worth saying: this stuff can lead to unexpected places. And Filip is looking for collaborators.
Got more for us? Let us know in comments.
And if you have any tips on audio performance or how this is developing (since I complained about that), or likely applications (since I mused about that), we’d love to hear that, too.
Sweet, Web audio api meetingin Bearlin is happening in june 10… come !
http://www.meetup.com/Berlin-Web-Audio-Meetup/events/222688616/comments/449341742/?a=li1_20&read=1&_af=event&_af_eid=222688616&itemTypeToken=COMMENT
Sweet, Web audio api meetingin Bearlin is happening in june 10… come !
http://www.meetup.com/Berlin-Web-Audio-Meetup/events/222688616/comments/449341742/?a=li1_20&read=1&_af=event&_af_eid=222688616&itemTypeToken=COMMENT
Sweet, Web audio api meetingin Bearlin is happening in june 10… come !
http://www.meetup.com/Berlin-Web-Audio-Meetup/events/222688616/comments/449341742/?a=li1_20&read=1&_af=event&_af_eid=222688616&itemTypeToken=COMMENT
Sad it didn’t make the roundup but I made http://synthy.io back in January (tweeted you in Feb about it Peter). It’s a three-oscillator web audio API synthesiser and tracker-sequencer with colour-mapped visualisation for each note and MIDI output. One of the features I’m most proud of is the live websocket server so any pattern that gets pushed to it is played live to a page where anyone can hear what anyone else has created in realtime. Especially fun with MIDI routed into soft synths or hardware. If enough people pushed patterns in you could just leave it on in your bedroom and constantly hear new music as it arrives. The patterns are all encoded as URLS too so easy to share.
Hope someone likes it anyway. I’ve done quite a lot of Web Audio API stuff recently so if anyone wants to collaborate, just ping me a message.
Don’t be sad – it’s the Web! You’re in 🙂
OHMYGOSH Thank you.
Sad it didn’t make the roundup but I made http://synthy.io back in January (tweeted you in Feb about it Peter). It’s a three-oscillator web audio API synthesiser and tracker-sequencer with colour-mapped visualisation for each note and MIDI output. One of the features I’m most proud of is the live websocket server so any pattern that gets pushed to it is played live to a page where anyone can hear what anyone else has created in realtime. Especially fun with MIDI routed into soft synths or hardware. If enough people pushed patterns in you could just leave it on in your bedroom and constantly hear new music as it arrives. The patterns are all encoded as URLS too so easy to share.
Hope someone likes it anyway. I’ve done quite a lot of Web Audio API stuff recently so if anyone wants to collaborate, just ping me a message.
Don’t be sad – it’s the Web! You’re in 🙂
OHMYGOSH Thank you.
Sad it didn’t make the roundup but I made http://synthy.io back in January (tweeted you in Feb about it Peter). It’s a three-oscillator web audio API synthesiser and tracker-sequencer with colour-mapped visualisation for each note and MIDI output. One of the features I’m most proud of is the live websocket server so any pattern that gets pushed to it is played live to a page where anyone can hear what anyone else has created in realtime. Especially fun with MIDI routed into soft synths or hardware. If enough people pushed patterns in you could just leave it on in your bedroom and constantly hear new music as it arrives. The patterns are all encoded as URLS too so easy to share.
Hope someone likes it anyway. I’ve done quite a lot of Web Audio API stuff recently so if anyone wants to collaborate, just ping me a message.
Don’t be sad – it’s the Web! You’re in 🙂
OHMYGOSH Thank you.
more than synths, i’d like to see some advanced and customizable midi tools. like building a standalone sequencer that syncs to whatever and has openly midi-mappable mapping capabilities
more than synths, i’d like to see some advanced and customizable midi tools. like building a standalone sequencer that syncs to whatever and has openly midi-mappable mapping capabilities
more than synths, i’d like to see some advanced and customizable midi tools. like building a standalone sequencer that syncs to whatever and has openly midi-mappable mapping capabilities
this is all great. but the latency is terrible. same with any audio app on android, latency is bad. unlike the ipad where the audio api came first, and the apps and latency is very good. i hope they work on it, i love this idea.
this is all great. but the latency is terrible. same with any audio app on android, latency is bad. unlike the ipad where the audio api came first, and the apps and latency is very good. i hope they work on it, i love this idea.
this is all great. but the latency is terrible. same with any audio app on android, latency is bad. unlike the ipad where the audio api came first, and the apps and latency is very good. i hope they work on it, i love this idea.
Back when I was very young, I had a ZX81, and bought a book of programs for it; one of those programs was called “dancing bear chess”, and fit into 1K. The quality of chess it played was best described as “serendipitous”, given that it basically moved at random within (a subset of) the rules of chess; but the rationale for the name was that the remarkable thing was that a game of chess could be fit inside 700 or so bytes of Z80 machine code at all, and that after that the quality of game was irrelevant. (Later I learned the full horror of what “dancing bear” actually meant, in literal terms.)
I’m getting a similar sense from this. As an achievement, it is remarkable in itself. But usefulness might be a long way off – and given the rate at which browser complexity grows, I’m not sure there are enough spins of Moore’s roulette wheel left to get there. Certainly, on my laptop – which, while it’s 3 years old, isn’t so far away from the spec of modern laptops going for a similar price, which tells me all I need to know about Moore’s Law – I get about 30 seconds of playing before Heisenberg succumbs to a case of the hiccups. Possibly it’s the garbage collector which is providing the interruptions, but whatever it is, I’m left wondering who would use this in preference – no, let me restate. I’m left wondering *how* anyone possibly *could* use this in preference to native plugins. Assuming there is a machine on which this stuff would be usable, anyone in a position to afford that machine is probably going to be in a position to afford a decent range of native software for it too…
Now maybe, since this all seems to be proprietary to Google anyway, there’s some scope for NaCl to reduce the requirements of this a little (unless NaCl was something else Google batted around for a while before losing it under a sofa and moving on to a fresh bowl of gooshifood), and then something usable might happen. But no matter how many resources have been poured into overcoming Javascript’s innate hostility to anything remotely resembling performance, it’s just not up to the job.
Unless that job is “giving browsers everywhere the ability to run astonishingly insecure applications achieving a performance last seen on a 25MHz 486”.
Interesting stuff! Does anyone know are there any plans for developing audiotool for other browsers? I also wonder if there is anything like audiotool that is not Google-owned.
The latency issues people are describing in the comments are a bit of a buzzkill, though.
Audiotool is not Google-owned. However Chrome is the browser that implements all the new fancy w3c stuff first and currently has the best javascript performance. The minute other browser will follow, Audiotool will support them. To lower the latency we are waiting for Audio-Worker. They will probably come later this year – in Chrome.
I see. Thanks for clearing that up!
Interesting stuff! Does anyone know if there are any plans for developing audiotool for other browsers? I also wonder if there is anything like audiotool that is not Google-owned.
The latency issues people are describing in the comments are a bit of a buzzkill, though.
Audiotool is not Google-owned. However Chrome is the browser that implements all the new fancy w3c stuff first and currently has the best javascript performance. The minute other browser will follow, Audiotool will support them. To lower the latency we are waiting for Audio-Worker. They will probably come later this year – in Chrome.
I see. Thanks for clearing that up!
Interesting stuff! Does anyone know if there are any plans for developing audiotool for other browsers? I also wonder if there is anything like audiotool that is not Google-owned.
The latency issues people are describing in the comments are a bit of a buzzkill, though.
Audiotool is not Google-owned. However Chrome is the browser that implements all the new fancy w3c stuff first and currently has the best javascript performance. The minute other browser will follow, Audiotool will support them. To lower the latency we are waiting for Audio-Worker. They will probably come later this year – in Chrome.
I see. Thanks for clearing that up!
Chrome already performs worse than my DAW (Reason) when it comes to RAM and CPU usage, just visiting stuff on the web…
Chrome already performs worse than my DAW (Reason) when it comes to RAM and CPU usage, just visiting stuff on the web…
Chrome already performs worse than my DAW (Reason) when it comes to RAM and CPU usage, just visiting stuff on the web…
Wow, cant wait to test out Heisenberg! thanks 🙂 http://spartan-sounds.com/
Wow, cant wait to test out Heisenberg! thanks 🙂 http://spartan-sounds.com/
Wow, cant wait to test out Heisenberg! thanks 🙂 http://spartan-sounds.com/
vult made me think of wavepot.com
vult made me think of wavepot.com
vult made me think of wavepot.com
http://www.playdrumsonline.com supports the new web midi api. You can now connect your digital drum kit and play along with youtube songs.
http://www.playdrumsonline.com supports the new web midi api. You can now connect your digital drum kit and play along with youtube songs.
http://www.playdrumsonline.com supports the new web midi api. You can now connect your digital drum kit and play along with youtube songs.
So awesome! I can’t wait to start rocking out on the web with my DrumPants! https://www.indiegogo.com/projects/drumpants-2-0-make-music-with-your-body
So awesome! I can’t wait to start rocking out on the web with my DrumPants! https://www.indiegogo.com/projects/drumpants-2-0-make-music-with-your-body
So awesome! I can’t wait to start rocking out on the web with my DrumPants! https://www.indiegogo.com/projects/drumpants-2-0-make-music-with-your-body
I made this when I first heard of the Web MIDI API: http://www.kreativekorp.com/app/mymidikeyboard/
And for anyone who remembers HyperCard: http://www.kreativekorp.com/lib/jsPlayCommand/
🙂
I made this when I first heard of the Web MIDI API: http://www.kreativekorp.com/app/mymidikeyboard/
And for anyone who remembers HyperCard: http://www.kreativekorp.com/lib/jsPlayCommand/
🙂
I made this when I first heard of the Web MIDI API: http://www.kreativekorp.com/app/mymidikeyboard/
And for anyone who remembers HyperCard: http://www.kreativekorp.com/lib/jsPlayCommand/
🙂