21 comments

[ 2.7 ms ] story [ 58.2 ms ] thread
Wow, very cool implementation, fun to play around with.

The "knobs" are a UX nightmare with a touchpad on my laptop though, nearly impossible to use.

Sometimes replicating a physical object doesn't translate well to the web - a simple slider (input type=range) would be much more effective here.

Thanks mfkp!

Yeah I know what you mean, I have an open issue to fix touch screen handling. I didn't have a touch screen handy but I'm hoping to fix it soon.

I wanted to play around with realistic UIs but I agree that sometimes digital interfaces like a slider are much more intuitive.

Nothing digital about a slider. The Juno, the SH-101, loads of classic synths had sliders.
Yeah you're right JonnieCache, I meant a more physical-like interaction but sliders are as well.
Maybe you could delegate scroll events to a scroll area a few hundred pixels tall (or roughly the knob circumference?), and then bind the knob value to that area's scroll percentage.
I surveyed my own VSTs when I went to implement a synth UI knob and discovered that most actually behave like a y axis slider. A few, like Synth 1, will teleport the cursor to an actual slider as you start dragging. The ones that try to make you literally "turn" it are by far the exception.

As for other feedback... it's unusable for me. Notes are triggering unexpectedly or get stuck, the interface goes unresponsive for seconds at a time and then suddenly catches up. I haven't been able to see what the knobs are like on this program because of the unresponsiveness. Tested Firefox 42, Chrome 46.0.2490.86 m.

I can play a few chords, at least. It reaches hard clipping distortion easily when I do that.

Sliders are far less buggy to implement and more intuitive on a 2d surface. Check out Roland's 101, Juno 106, Juno 60, Jupiter series, Arp Odyssey, 2600, etc. etc. etc... You won't be breaking any analog rules.

Knobs are mostly en vogue because modern modular and Moog, but sliders are still on new products (Roland System100 modular revival/re-invention stuffs)

There are variations on how a knob "works" with a cursor and this leads to guessing, if not bugs in the implementation.

Huh... these are pretty cool ideas on implementing knob UIs without the actual knob turn. I'll try working on a more reliable implementation, with a slider or a drag area and just map the values.
I tried clicking and dragging the knobs, nothing happened and I concluded they're non-interactive. What mouse interaction do they respond to?
Nice idea, but .. Just thought I'd better report: Doesn't work for me at all on OSX, Safari 9.0.1 .. on Firefox 42.0, it works, but the GUI renders improperly and the controls don't respond to mouse events, but it plays sound when I hit the QWERTY keyboard .. Chrome 46.0.2490.86, it renders the GUI properly, plays sound, but doesn't really react to mouse events on the knobs as smoothly as I would expect of a synthesizer - very jerky. Also, presets don't seem to work.
Thanks for reporting fit2rule!

It's weird, I'm running it well on Firefox and Chrome on OSX but I'll test on other setups. The presets should be empty to begin with and only save ones you want locally.

Linux FF 42.0 here. Playing notes works but nothing else like the knobs respond to mouse inputs.
This is great fun to play around with - if I'm not careful I'm gonna get completely distracted from doing any work today...

Just to chime in on others' comments, the knobs are pretty unpleasant to use, even with a mouse. I think though, Ableton has spoiled me with regards to knob/slider UX.

Awesome work!

Cheers Jimmed!

I know exactly what you mean with Live, it's so smooth!

I'm working on a web-based VJ project right now and it's a lot more like Ableton, slick and minimalistic.

It looks awesome, but it's unusable under my chrome + ubuntu. Any parameter tweak i tested results in a huge lag, sometimes making the tab stop responding.
This is so weird, it's running well for me but obviously buggy for many.

Do you mind telling me which parameters caused issues? and what machine are you running on?

fwiw I got reports of inconsistent/unreproducible performance issues when I was working on a webaudio synth project last year. Never figured if it was down to audio hardware or what but I have seen a couple upgrades of Chrome that performed weird, tho webMIDI API was still shifting a bit
I confirm this. My webaudio project was halted because I couldn't figure out why the cpu usage kept going up. After some chromium lists reading I decided to give them some time to polish the api. Some months later the same project was working as expected.
I tested again and seems to be on every knob. It goes like this; i change a parameter, the "led ui" on the synth shows the param name and a value and it freezes for some 40-50secs. During that time ui is totally unresponsive. After the freeze time the ui might come back, maybe burst a note or two, or might hang like that forever.

My computer is an old core 2 quad, but i'm working on a webaudio project myself and by my estimation it should be able to handle your synth easy.

Also, in case it helps. I've found some hard to debug webaudio issues, like osc hanging in forever and 'cpu leaks', but your issues seems more related to how the ui is updating the audio graph.

This wins the cup in the Most Nonfunctional Website category.
need a hacker? to track a cheating spouse, mails, facebook, whatsapp, credit, database and all forms of hacking, contact the hack guru. demon_teco@gmx.com. you can learn hacking too