Thanks to the addition of MIDI to a new generation of browsers, a browser tab could as easily be an interface to a synth – not just a place for social media distractions of pictures of synths with cats.

Now, we’ve got an (unsolicited) Web editor for our own MeeBlip synth, joining editors for Roland Boutique and Yamaha Reface instruments.

MeeBlip Web editor

First, let’s back up. Why do this with a browser instead of with software? Well, as I see it, there are two reasons for that (apart from the fun or novelty):

1. You can deploy more easily. Instead of mucking about with installers and operating system compatibility, all you have to do is point your browser at the right page.

2. You can share directly. Putting everything on the Web means easy integrated sharing and connectivity, and updates that happen instantly (see #1).

Which synths support such a thing?

Soundmondo is a site for Yamaha’s Reface synths, built by Yamaha officially. Its emphasis is on patch discovery across genres. Yamaha deserves some credit for championing the idea.

breadandbuttersounds.com is a general resource site that has built homebrewed editors for the Roland Boutique line. (That’s JU-06 Juno, JP-08 Jupiter, and a forthcoming JX-03.) These are really editor/librarians in more of a traditional sense, down to representations of the front panel.

And now, it’s our turn with the MeeBlip.

anodeweb - 1

Plug a MeeBlip into your computer via a Web interface, fire up Google’s Chrome browser, and you can send patches to your anode. Best of all, you can share your work as a Webpage (or send it via Twitter or email).

You can see it in action in this demo video:

Proving the “sharing” point, you can’t take a traditional editor/librarian and share a patch on Twitter. But you can using a Web editor.

So this link:
https://factotumo.com/blipweb/?aDecay=127&fDecay=127&sustain=127&fCut=27&wave=48&detune=62&octave=127&pwmSweep=127&lRate=83&lDepth=127&lDest=0&glide=64&vcfEnvAmount=88&lRand=127&lNoteRetrig=127&oscBWave=127

posted on Twitter as https://t.co/qpQkSDFVfc gives you a “squiggly” patch for your anode.

But there’s more. An update this week now lets this Web interface do stuff that essentially combines online documentation with hands-on, immediate results.

Maybe you never liked reading the #$*&ing manual. But what if you could play the manual?

Now, the Web interfaces supports some parameters that didn’t fit on the anode’s tiny case (glide, VCF envelope amount, LFO random, LFO note retrigger, oscillator b wave type).

And you get a reference to wavetable types.

You can also try a random patch.

Suddenly, the browser is seeming like a logical extension of a synth. And whereas sharing source code for a “native” editor app would require a lot of work setting up a development environment and dealing with cross-platform issues, it’s also easier to share, understand, and modify the source code for a Web editor. So it makes more sense as open source code than a traditional app might.

And of course, the MeeBlip (unlike the Yamaha and Roland synths) is the first open source hardware synth to have an open source Web editor (to my knowledge, anyway).

I’m really excited by this. What was once sort of a strange Web hack-a-thon novelty is finally looking useful to average users. So expect more of this.

More:
blipweb: Web MIDI Patch Editor for MeeBlip anode [factotumo.com]

MIDI-only Params and More for blipweb (re: the update)

And the editor:
https://factotumo.com/blipweb/ (Dear Apple: please add this to Safari!)

And if you don’t have a MeeBlip, well, we can fix that for you, you know:
http://meeblip.com

Congrats and thanks to Ben Schmaus for his great work!)

  • Polite Society

    This is definitely the best use of web midi i’ve seen yet. It makes perfect sense to have custom editors on the web, especially if librarian features can be implemented. Spent way too long chasing down various third party editors which often stop working on later versions of operating systems. Let your patches run wild and free, for as the saying goes let your patches run wild and free.

  • mrbelm

    The editor layout doesn’t match my Anode layout. What am I missing?

  • Jake

    Indeed, the ‘joy’ of trying to find a working editor for my micron when I had an enforced upgrade from snow leopard to Mavericks due to having my MacBook Pro stolen is not something I’ll forget in a long time. See also the joy of having to get the text editor out so that the executables for an earlier version of komplete would run because NI only envisaged up to a certain point release of OS X despite the individual vsti’s and au’s running happily under Mavericks.

  • Will

    This is cool! It’s sad how many editor librarians have been coded and lost due to operating system updates.

    Does anyone know if any Android tablet’s version of Chrome yet support Web MIDI? Some of them are dirt cheap and I’d gladly fork over ~$100 for a small, mobile, touchable editor librarian (that I could extend myself!).

    • Regarding the compatbility, you can check here:
      http://caniuse.com/#search=web%20midi

      Basically Web MIDI is compatible with every Chrome version (desktop+Android) since version 43 and Opera since version 30.

      • Will

        Thanks, Sebastian. Think it’s time to find a cheap Android tablet with a current OS.

        • Will

          Or maybe it’s available on iOS after all… http://www.taktech.org/takm/WebMIDIBrowser/Web_MIDI_Browser.html

          • djkm

            Interesting, but still not done natively, if you need to download an app. I realise that Google’s push for ‘everything you can do natively, you should be able to do in the browser’ is because of their Chromebook line, but Apple really are rubbish at keeping up in the browser, but the reason for this is as transparent as Google’s; if you can do everything in the browser, why would you ever create an app to do the same? And where would Apple’s cut of app purchases go?

  • Being independent from the OS (and instead depend on the widespread browser) is definitely a huge improvement considering all the problems people keep having with OS/driver updates.
    I (as a web developer) can also confirm that working on code for the web (e.g. JavaScript+HTML+CSS) is way less complex and friendly regarding the development environment than working on native applications which usually require more setup effort.

    • djkm

      There is also a fantastic framework that someone put together that speeds the process up and also easily deals with NRPN values. https://github.com/cotejp/webmidi/releases

      I tried to make a circuit editor but kind of gave up when I saw the official one, although it does work as a decent randomiser (even though there are so many parameters to change, more often than not it sounds like a total mess…)

      Now trying with the minilogue which should be a far simpler affair…

  • Foosnark

    As with the other web-based MIDI stuff I have tried, it completely screws up everything else on my system that wants to send/receive MIDI.

    So I can’t even confirm that it works, it just stops everything else from working 😛

    • djkm

      This is the bit I have not got a grip on yet during my own messing around with this. While it expects you to select a midi input it does seem to just ignore that and try to send the message to everything it can find. Is that what you’re seeing here?

      • Foosnark

        I haven’t noticed that, but simply, if have this page send something, then:

        — Maschine and FL Studio both act as if everything is fine but my Meeblip doesn’t receive MIDI messages from them, until I close the browser tab, reboot the Meeblip and restart the host, or sometimes unless I reboot
        — my MIDI-over-USB keyboard controller is disabled and can’t be re-enabled until I reboot my computer (just unplugging and replugging the keyboard doesn’t help).

        • Ben Schmaus

          Hi Foosnark and djkm,

          Happy to help you debug usage of blipweb on your systems. I created an issue on GitHub at https://github.com/benschmaus/blipweb/issues/1. It would be helpful if you could share some details on your setups to get a better sense for what’s going on.

          The port dropdown box lists MIDI outputs returned by the Web MIDI implementation in Chrome. And the “send to meeblip” button will send MIDI control change messages over the port and channel selected.

          If you open the JavaScript console in Chrome you can see the actual MIDI data being sent to the output port.

          If you’re interested in following up on this let’s move the conversation to the GitHub issue.

          Ben

      • Foosnark

        I haven’t noticed that, but simply, if have this page send something, then:

        — Maschine and FL Studio both act as if everything is fine but my Meeblip doesn’t receive MIDI messages from them, until I close the browser tab, reboot the Meeblip and restart the host, or sometimes unless I reboot
        — my MIDI-over-USB keyboard controller is disabled and can’t be re-enabled until I reboot my computer (just unplugging and replugging the keyboard doesn’t help).

  • djkm

    http://www.duncanmetcalfe.net/minilogue/

    My Minilogue randomiser that happens to allow you to affect most of the variables as well. Use USB, if it works, you’ll see the buttons and dials, if it doesn’t and you’re using USB, I’d be interested to hear your set up so I can optimise it a bit…

  • Martin Roberts

    This is great. I have a (probably naive) question: how would this work with regard to sequencing the MeeBlip as well as controlling its parameters from Chrome? Is there another web-based sequencer that can do that?

  • Graham Spice

    Now if we could just update the firmware via web browser! 🙂 J/k

  • Tiago Morais Morgado

    would be nice to make the GUI webgl based. if i can access the source code of the editor, i can perhaps try to work on that, without promising anything at all

    • Tiago Morais Morgado

      is there like a github repo, or something?

  • Meet Peter Kirn, the only guy who matches flowers with his cables.