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:

https://factotumo.com/

And see you on the editor!

https://meeblip.com/https://editor.meeblip.com/

  • Any MeeBlip or just the Triode? EDIT Ahh went to page – Either/ or Nice.

    • James Grahame

      Yup. There are web editors for both triode and anode.

  • Armando

    man I can’t wait to get home! THANK YOU!!

  • Olivier Ozoux

    Nice! I’m trying this weekend. Would be great if the Triode firmware had a “latch mode” for buttons, so it didn’t jump to a new value until the dial catches up with the internal value set by the CC.

    • James Grahame

      hmm. Latch mode is a good idea.

  • GG

    I was about to ask if it can also save custom patches, then I realized you can save them as browser bookmarks (after hitting Send to update your URL, to be safe). Pretty clever. I’d rather not fill my browser with 100+ patch bookmarks, but it works and it’s free, and being able to save patches is a huge plus for these synths.

    • Ben Schmaus

      HI, GG. Clicking the “Patch Link” button in the control bar will give you a link that encodes the current knob and switch values in a URL. You can right click the link and bookmark the URL, like you mentioned. (The “Send” button by itself just sends the knob/switch values via MIDI and doesn’t update the URL.)

      You can also tweet patch URLs to https://twitter.com/MeeblipBot and tag with #meeblip (and any other descriptive tags you’d like) as an alternative “lo-fi” patch storage mechanism.

  • Polite Society

    I feel like this is the future for all hardware editors. There is no reason why we couldn’t have online editors with patch librarian/sharing features for most synths. I’m honestly surprised that guitar effects boxes got there first.

    • That’d be great. It also opens up some new opportunities for documentation / education.

      The only downside is requiring an Internet connection … but that’s solvable, too.

      • Will

        Solvable indeed. Either via web-to-desktop frameworks like GitHub’s Electron or some simple meta tags +localStorage that allow something to be available offline.

  • Will

    Please please, God of Synths, let this be the future of editor/librarians. Heart breaking to consider the number of editor/librarians lost in the swamp of OS updates.

  • Gabriel Rey-Goodlatte

    Cool. Would it be possible to wrap Chrome in a VST and give the host access to the parameters? I like a lot of things about this approach, but I want to be able to design and save sounds in DAW projects. It would be cool if there were one generic VST that could load any web MIDI editor.

  • Max

    For hardware editors ok,
    but I am unsure about the browser as an work environment for music.
    We have seen that kind of stuff with flash before minus the midi part.
    Good for 10 minutes of geeky fun during a coffee break.

  • Just wanted to take a moment to say this is sooo cool.

  • Now that Novation has brought their Circuit Components entirely offline, it would indeed be a good time to do the same with Meeblip. For one thing, some of us aren’t too keen on Chrome. Installing a browser on a computer just to run a synth editor makes relatively little sense and it sure was enough to make me look elsewhere after noticing this requirement.

    • Um, yeah, okay — yes, it’s something we want to do, but a few things to point out:

      1. Chromium (which requires no Google integration) works just fine. So does Opera. It’s other browser developers who have failed to implement the MIDI spec.

      2. Our editor is completely free and open source. It also was developed as a volunteer effort by a fan!

      3. MeeBlip works just fine without an editor! Most things are accessible on the front panel. The coupe of parameters that aren’t work via MIDI. So you’re free to make your own tools wherever you like — as people have done in Max for Live, as a VST, etc.