Open a tab, design a new sound. Now you can, with a free Web editor for the MeeBlip. And it shows just how powerful the browser can be for musicians.
Watch:
And if you own a MeeBlip (triode or anode), give it a try yourself (just remember to plug in a MIDI interface and set up the channel and port first):
https://editor.meeblip.com/
Don’t own a MeeBlip? We can fix that for you:
https://meeblip.com/
Why a browser? Well, the software is available instantly, from anywhere with an Internet connection and a copy of Chrome or Opera. It’s also instantly updated, as we add features. And you can share your results with anyone else with a MeeBlip, too.
That means you can follow our new MeeBlip bot account and discover new sounds. It might be overkill with a reasonable simple synth, but it’s a playground for how synths can work in our Internet-connected age. And we think in the coming weeks we can make our bot more fun to follow than, um, some humans on Twitter.
Plus, because this is all built with Web technologies, the code is friendly to a wide variety of people! (That’s something that might be less true of the Assembly code the MeeBlip synth hardware runs.)
You can have a look at it here. Actually, we’re hoping someone out there will learn from this, modify it, ask questions – whatever! So whether you’re advanced or a beginner, do have a look:
https://github.com/MeeBlip/meeblip-web
All the work on the editor comes to us from musician and coder Ben Schmaus, based on an earlier version – totally unsolicited, actually, so we’re amazed and grateful to get this. We asked Ben for some thoughts on the project.
CDM: How did you get into building these Web music tools in the first place?
Ben: I had been reading about the Web MIDI and Audio APIs and thinking about how I might use them. I bought an anode Limited Edition synth and wanted a way to save patches I created. I thought it’d be cool and maybe even useful to be able to store and share patches with URLs, the lingua franca of the web. Being a reasonably capable web developer it seemed pretty approachable and so I started working on Blipweb. [Blipweb was the earlier iteration of the same editor tool. -Ed.]
Why the MeeBlip for this editor?
Well, largely because I had one! And the (admirably concise) quick start guide very clearly outlined all the MIDI CC numbers to control mappings. So it seemed very doable. Plus being already open source I thought it would be nice to contribute something to the user community.
What’s new in the new MeeBlip editors versus the original Blipweb?
The layout and design is tighter in the new versions. I added a very basic sequencer that has eight steps and lets you control pitch and velocity. It’s nice because you can produce sound with just a MeeBlip, MIDI interface, and browser. There’s also a simple patch browser that has some sample patches loaded into it that could be expanded in a few different ways in the future. Aside from the visible changes the code was restructured quite a bit to enable sharing between the anode and triode editors. The apps are built using JQuery, because I know it and it also had a nice knob UI widget. If I were starting from scratch today, I’d probably build the editors using React (developed by Facebook), which improves upon the JQuery legacy without over-complicating things.
Why do this in a browser rather than another tool?
There’s the practical aspect of me being familiar with web technologies. Combining that with the fact that Chromium-based browsers implement Web MIDI, the browser was a natural target platform. I’m not sure where Web MIDI is going. It’s obviously a very niche piece of functionality, but I also think it’s super useful to be able to pull up a web page and start interacting with hardware gear without having to download a native app. The ease of access is pretty compelling, and the browser is a great way to reach lots of OSes with minimal effort.
You also built this terrific Web MIDI console. How are you using that – or these other tools – in your own work and music?
The Web MIDI console is a tool to inspect MIDI messages sent from devices. I updated it recently after being inspired by Geert Bevin’s sendMIDI command line utility. So now you can send messages to devices in addition to viewing them. I often use it to see what messages are actually coming from my devices. I’ve written a few controller scripts for Bitwig Studio and the MIDI console has come in handy for quickly seeing which messages pads, knobs, sliders, etc. send. There are, of course, native apps that do this sort of thing, but again, it’s nice to just open a web page and have a quick look at a MIDI data stream or send some messages.
What was your background; how did you learn these Web technologies?
I studied music in college and learned just enough web dev skills through some multimedia courses to get a job making web pages back around 2000. It was more enjoyable than the random day jobs/teaching guitar lessons/wedding band gigs I was doing so I decided to pursue it seriously. Despite starting out in web/UI development, I’ve spent more time working on back-end services. I was an engineering director at Netflix and worked there in the Bay Area for five years before moving back to the east coast last summer. I’ve been spending more time working on music software lately and hope to find opportunities to continue it.
Did you learn anything useful about these Web technologies? Where do you think they’ll go next? (and will we ever use a Chromebook for MIDI?)
Well, if you want the broadest compatibility across browsers you need to serve your Web MIDI app over HTTPS. For example, Opera doesn’t allow MIDI access over HTTP. 🙂 I’m not sure where it’s going, really. It’d be nice to see Web MIDI implemented in more browsers. People spend so much time in their browsers these days, so it seems reasonable for them to become more tightly integrated with the underlying OS. Though it’s a bit hard to find strong incentive for browser vendors to support MIDI. Nonetheless, I’m glad it’s available in Chrome and Opera.
I think Web MIDI apps work quite well as tools in support of other products. Novation’s browser apps for Circuit are really well done and move Web MIDI beyond novelty. I hope the MeeBlip editors do the same. I also like Soundtrap and think Web MIDI/Audio apps work well in educational contexts since browsers are by and large ubiquitously accessible.
Ed.: For more on this topic of SSL and MIDI access, Ben wrote a companion blog post whilse developing this editor:
Web MIDI Access, Sysex, and SSL
Why make these tools open source? Does it matter that the MeeBlip is open source hardware?
It absolutely matters that MeeBlip is open source. That’s the main reason I bought into it. I really like the idea of open and hackable products that let users participate in their further development. It’s especially cool to see companies that are able to build viable businesses on top of open products.
In the case of the editors, they’re (hopefully!) adding value to the product; there’s no competitive advantage in having a patch editor by itself. It makes sense to open source the tools and let people make and share their own mods. And maybe some of that work feeds back into the main code line to the benefit of the broader user base. I think open source hardware/software products tend to encourage more creative and vibrant user communities.
What other useful browser music stuff do you use? Any tips?
Hmm…the Keith McMillen blog has some good posts on using the Web MIDI API that I’ve referred to a number of times. And there’s a Google music lab site with some interesting projects. Although I don’t have a Circuit or reface synth, it’s nice to see Novation [see our previous story] and Yamaha (Soundmondo) with Web MIDI apps, and they look useful for their users. I’m curious to see what new things pop up!
Thanks, Ben! Yes, we’ll be watching this, too – developers, users, we’d love to hear from you! In the meantime, don’t miss Ben’s site. It’s full of cool stuff, from nerdy Web MIDI discussions to Bitwig and SuperCollider tools for users:
And see you on the editor!
https://meeblip.com/https://editor.meeblip.com/