
Show HN: The first websynth that's 100% mappable to a MIDI controller - magnusson
http://github.com/stevengoldberg/juno106
======
tsenkov
Nice job!

As we talked on Reddit (I released my synth today, Viktor NV-1:
[http://nicroto.github.io/viktor/](http://nicroto.github.io/viktor/)) I
definitely need to add QWERTY keyboard playability.

Also - url sharing of presets... that's a great idea! Viktor uses local
storage so you can save presets and allows you to export and import libraries
of presets (in json files), but file sharing is harder than a url.

I think there is something wrong with the way your envelope works, though. I
hear clipping when I change notes. In my case it took a lot of time tuning the
envelope, before it became really playable through a keyboard and still as you
know, in Firefox there is an issue with AudioParam.setTargetAtTime starting or
arriving at a value close to 0.

Congrats on making #1 page on HN. Couple of hours after you, my submission
didn't even get an upvote. :P

------
nutate
Heh. This is fun.

mild wub: [http://resistorsings.com/106/#patch/mildwub?vca-
level=0.4840...](http://resistorsings.com/106/#patch/mildwub?vca-
level=0.484091?env-attack=0.176918?env-decay=0.352521?env-sustain=1?env-
release=0?vca-envEnabled=1?dco-sawtooth=1?dco-pulse=0?dco-noise=0?dco-
pwm=0.656215?dco-range=1?dco-sub=1?dco-lfoPwmEnabled=0?cho-chorusOff=0?cho-
chorusI=0?cho-chorusII=1?vcf-cutoff=0.170792?vcf-res=0.596484?vcf-
envMod=0.432955?vcf-invert=1?vcf-keyFollow=0.535227?lfo-pitchMod=0?lfo-
rate=0.614773?lfo-delay=0?lfo-freqMod=0.845419?hpf-cutoff=0)

~~~
johnpickens
Steve?

------
Netcob
Not sure if 1024x768 is a good minimum resolution. I have an 13" ultrabook
with a FHD screen, so thanks to the high DPI settings websites think it's 720p
(so it won't load for me). Also few screens use 1024x768... 720p is more
common, as is 1024x600 for some devices like tablets and netbooks.

~~~
cogburnd02
I still use monitors with 640x480. They're perfectly functional; why would I
throw them away?

------
JonnieCache
Just had a play with this. Very nice! The real juno lets you turn on both
choruses at the same time though :)

(Also I cant seem to get the release to work on the envelope.)

If anyone is interested in an accurate emulation of this classic synth, heres
one that sounds largely identical to the real thing and is very reasonably
priced: [http://kunz.corrupt.ch/products/tal-u-no-
lx](http://kunz.corrupt.ch/products/tal-u-no-lx)

~~~
magnusson
In Firefox the envelope release is broken, and overall performance seems worse
compared to Chrome, for reasons I haven't really bothered to investigate
deeply. It mostly works in Safari, but Safari does something different with
garbage collection of audio nodes, so the note-stealing behavior doesn't work
right.

Basically, use Chrome for now if you want it to play nice. WebMIDI is only
supported in Chrome anyhow.

Also, 100% agreed on TAL U-NO-LX, it's one of my favorite plug-ins and the
price is great!

~~~
padenot
Yeah we're fixing this as we speak (I work on Web Audio API at Mozilla), it
should work fine in Nightly in a couple weeks, worst case.

~~~
magnusson
Ha, thank you Paul! Glad to know it's probably not my fault ;)

------
teh_klev
Due this and the other web synth Show HN [0] I have lost a couple of hours of
my day.

Thanks for the fun :)

[0]:
[https://news.ycombinator.com/item?id=9640218](https://news.ycombinator.com/item?id=9640218)

~~~
magnusson
Yes! Tis truly an exciting time to be playing synthesizers on the web!

------
SuddsMcDuff
Here's my patch :) [http://resistorsings.com/106/#patch/PATCH%20NAME?vca-
level=1...](http://resistorsings.com/106/#patch/PATCH%20NAME?vca-level=1?env-
attack=0.220241?env-decay=0.341513?env-sustain=0?env-release=0?vca-
envEnabled=1?dco-sawtooth=0?dco-pulse=0?dco-noise=0?dco-pwm=0.286776?dco-
range=0?dco-sub=1?dco-lfoPwmEnabled=0?cho-chorusOff=0?cho-chorusI=0?cho-
chorusII=1?vcf-cutoff=1?vcf-res=0.755575?vcf-envMod=0.510813?vcf-invert=0?vcf-
keyFollow=0?lfo-pitchMod=0?lfo-rate=0?lfo-delay=0?lfo-freqMod=0?hpf-cutoff=0)

------
thomasfl
All I want now is a musical keyboard with a built in browser that supports
this new standard.

All new standards and inventions creates new problems and products.

~~~
magnusson
Ha! I dunno, what occurs to me is how cool it is that we can still get so much
use out of MIDI, a standard adopted in 1983.

~~~
JonnieCache
MIDI is well past its prime. It places unnecessary limitations on musical
expression. I'd like to see browsers (and instruments) adopting Open Sound
Control.

[http://en.wikipedia.org/wiki/Open_Sound_Control](http://en.wikipedia.org/wiki/Open_Sound_Control)

~~~
nutate
One could argue that it places necessary limitations on musical expression
that allowed it to flourish. Defining scales, etc in the protocol left some
issues w/ microtonal stuff. The timing protocol is a bit squidgy for beat
matching, but if you look at OSC everyone creates their own namespace and
instead of one protocol you have a bunch of devices with different mapping
conventions.

I would say the 0-127 range of controls hurts midi more than anything, if
someone just bumped midi to osc's range most people would be happy. HD MIDI
does that and may end up usurping OSC before OSC even gets traction:
[http://www.midi.org/aboutus/news/hd.php](http://www.midi.org/aboutus/news/hd.php)

~~~
magnusson
Re the 0-127 range, you may be familiar with this, but many devices are
capable of sending 14-bit MIDI messages by combining 2 different MIDI CCs,
allowing for much finer control. 106.js supports both 7 and 14-bit messages.

~~~
nutate
Wow, looking at that it looks like my old (lost?) Peavey PC-1600 could send 14
bit messages. In the end I think a lot of the problem is also fixable with
better interpolation and mapping, but I've definitely ended up sitting in the
range I want on a synth mapping, but getting clicks when I touch a knob.
Pretty interesting to think 14 bit midi has been around for so long but it
hasn't really taken off.
[https://en.wikipedia.org/wiki/NRPN](https://en.wikipedia.org/wiki/NRPN)
whenever I go into the midi standard I end up finding neat stuff. These days
USB MIDI and bluetooth MIDI have also kept it alive while OSC is still lost in
a web of standards all different, great for communicating when one dev is on
the send and receive side, but bad for easy interop.

------
chestervonwinch
Very nice. I dabbled in building a web synth not too long ago. Volume
envelopes were a pain in the butt. I could never seem to manage to resolve the
annoying clicking from volume changes. I also incorporated a fft visualizer in
the middle of the synth, but this really bogged it down and made the audio
extremely choppy. This synth is much nicer :P

------
jader201
This is awesome, nice work!

Also just found this [1] general midi emulator, somewhat relevant, for those
looking for something a little more canned (but less powerful).

[1] [https://github.com/mudcube/MIDI.js](https://github.com/mudcube/MIDI.js)

------
AlfaWolph
I thought Soundtrap [1] was able to accept MIDI input as well. Is the "100%"
the distinction here?

[1] [https://www.soundtrap.com/](https://www.soundtrap.com/)

~~~
magnusson
There are lots of websynths that respond to MIDI note messages, and I've seen
some that respond to CCs as well -- e.g. the midi-synth [1] by Chris Wilson
(editor of the WebAudio and WebMIDI specs) -- but in that case, the CC
messages are hardcoded to the UI. (It also doesn't support 14-bit messages.)

In 106.js, every UI control is arbitrarily assignable to any MIDI CC message,
so you can map it to your device however you like. That's a feature I'm used
to ("MIDI learn") from desktop DAWs, but haven't seen in any other websynths
yet.

You won't be able to see the UI for this feature at all unless you've got a
MIDI controller plugged in, though.

[1] [https://github.com/cwilso/midi-synth](https://github.com/cwilso/midi-
synth)

~~~
NHQ
It would be most excellent if you turned that MIDI mapping code into it's own
module.

~~~
magnusson
Hm, yeah, that would be a cool thing to publish separately. The MIDI mapping
code is pretty much isolated to these two objects [1] [2], but I'd have to do
a little thinking about how people would want to use it, and separating it
from Backbone would take some work.

[1]
[https://github.com/stevengoldberg/juno106/blob/master/js/vie...](https://github.com/stevengoldberg/juno106/blob/master/js/views/item/midiItemView.js)

[2]
[https://github.com/stevengoldberg/juno106/blob/master/js/mod...](https://github.com/stevengoldberg/juno106/blob/master/js/models/midiModel.js)

------
dvirsky
Really nice even though I don't have a MIDI keyboard lying around here.

~~~
catshirt
there are apps that give your qwerty keyboard MIDI output, if you are so
inclined to give it a shot. :)

~~~
dvirsky
I prefer to try a real MIDI keyboard at home tomorrow :) But the synth itself
sounds and behaves very nicely.

------
bwanab
Really nice sounding. I can't wait to get home and try it with my wx7.

------
lukeh
Pretty cool! (No arpeggiator? :))

~~~
magnusson
Well, the real 106 doesn't have an arpeggiator either (without mods anyway) --
only the 6/60 do. I don't think it'd be too hard to implement one though, so I
may do that soon.

------
chazu
Very cool, how is it licensed?

------
catshirt
not the first but good job mate

~~~
magnusson
If you have links to other websynths with similar "MIDI learn" functionality,
I'd love to see them!

~~~
catshirt
note to self: don't comment on HN until you've had your coffee. my comment was
cranky and jealous. :)

i built learn functionality into my MIDI library for browser based UIs in
2012: [https://github.com/kn0ll/midi.io](https://github.com/kn0ll/midi.io)
unfortunately my synths that use them are long gone. i developed this as the
WebMIDI spec was being published and long before it was available in the
browser (which is why i'm using web sockets for UDP communication).

anyway, i really did mean "good job mate", your app is awesome.

~~~
magnusson
Very cool, thanks for sharing!

