top | item 4011687

Google's HTML5 synthesizer for Moog's 78th birthday

192 points| pak | 14 years ago |google.com | reply

91 comments

order
[+] moocow01|14 years ago|reply
I feel a little bit mixed being that Google seems to be using this to market Chrome.

I have the latest version of Firefox and Safari and Google is informing me that I need a modern browser to experience it, which actually seems to just be Chrome.

Seems pretty passive aggressive.

[+] phoboslab|14 years ago|reply
Thing is, sound support (WebAudio or HTML5 <audio> alone) is not a priority for most browsers, Firefox included. I like that Google is so aggressive - maybe some of the other browser vendors will begin to care.

I ranted about the <audio> element quite a while ago[1] and many points are still valid. Also, <audio> can't be used for "dynamic" sound at all. Chrome's/Safari's WebAudio is the way to and Mozilla agrees, but hasn't done anything implementation wise.

[1] http://www.phoboslab.org/log/2011/03/the-state-of-html5-audi...

[+] EastSmith|14 years ago|reply
Agree. Google nuked Firefox is what really just happened. It was really fun, while Google was using its home page powers to mock IE for missing features, but I am on Firefox Beta Update channel and they tell me to "upgrade to a modern browser". It is disappointing.
[+] unimpressive|14 years ago|reply
Firefox 12.0 on Linux here.

It works fine but at the bottom...same message.

I gave my monitor the middle finger.

[+] masklinn|14 years ago|reply
It also seems pretty much bullshit, I opened the page in chrome and the doodle doesn't seem to do anything but link to the "Bob Moog" search in either browser.
[+] alainbryden|14 years ago|reply
Funny enough, it worked perfectly in Firefox 12.0 and was nothing but an image in Chrome 16.0. After upgrading to 19 it worked equally well. Shows how much I use Chrome I guess.
[+] lurchpop|14 years ago|reply
Funny, it actually doesn't work for me on chrome but does on FF
[+] lordlarm|14 years ago|reply
It works fine in Opera, for once.
[+] schme|14 years ago|reply
I have firefox 12 (release) on Windows and it works fine.
[+] csomar|14 years ago|reply
It didn't work for me on Chrome, and it worked fine on FireFox. I have version 19m.
[+] conradfr|14 years ago|reply
Ironically on my shitty HP Windows XP machine at work it is working better (but not perfect, especially multitrack playing) on Firefox than Chrome (sound stuttering).
[+] shazow|14 years ago|reply
I believe it falls back to Flash if you don't have the appropriate browser audio API. It should still work but supposedly not as responsively/accurately. (I haven't tested this myself.)
[+] fungi|14 years ago|reply
"Upgrade to a modern browser" that's a bit snarky... i'm on Firefox 12
[+] rplnt|14 years ago|reply
Welcome to the world of Opera users. Google is being dick as always, just ignore it (sometimes you have to change user-agent though). They have their valid reasons (money).
[+] wvenable|14 years ago|reply
I'm on Firefox 12 and it worked perfectly.
[+] jgrahamc|14 years ago|reply
The amount of traffic that being on the Google Doodle gets you is stunning. Moog signed up for CloudFlare in a hurry today.
[+] j_col|14 years ago|reply
Once again we have the latest Google marketing piece hitting the top of HN, getting tired of it (already commented about this here: http://news.ycombinator.com/item?id=3898130).

Also note that this one is being used to market Chrome, even to Firefox users, which is pretty insidious. See this tweet with screenshot from Dave Flanagan:

https://twitter.com/__DavidFlanagan/status/20516612817828249...

[+] chrislo|14 years ago|reply
The Web Audio API is being standardised as part of the W3C Audio WG (disclaimer: of which I am a member).

We have a number of browser vendors on board, including Mozilla, and have recently reached a consensus to push forward with the (webkit-proposed) Web Audio API rather than the Mozilla-proposed MediaStream processing API and Audio Data API.

You can find much more information here: http://www.w3.org/2011/audio/wiki/Main_Page

We'd really welcome input from developers and browser implementers at any stage.

[+] deelowe|14 years ago|reply
It's pretty well known that Google uses doodles and other quirky things to showcase cool features of new web technologies (eg. pacman). This is showcasing the new(ish) web audio API. I think it's a neat way to get some eyes on what's happening on the web these days. It promotes the open web and I'm glad there are a few big companies out there who are pushing these things forward.

If you don't like the post, downvote, but there's a reason why most techies like these sort of tech demos and we especially like it when we see a big company using them.

[+] jsprinkles|14 years ago|reply
In the series of comments you linked to you indicate that you work at Google. Based upon the rest of your comment history, I'd posit that your resentment and distrust of Google isn't healthy for you or the company and that you should consider leaving. If I were your lead, I'd fire you (but refer you elsewhere, if technically savvy), simply because your attitude seems to indicate that a positive working relationship isn't possible between you and Google.

Nobody has to agree with everything an employer does (ever), and I certainly don't agree with everything my employers do -- sometimes, that disagreement was public when I posted comments here under my real name. This was always a passing phenomenon, though, something like this:

> I think we could do better at X, and I'm definitely hearing what you're saying.

You, on the other hand, have months upon months of comments that betray a, to steal your word, insidious resentment of the company that you work for. You are semi anonymous, which is good for you but a terrible representation of Google; there is only one comment that I found where you forget to say "their" and you instead say "our".

I'm genuinely not trying to be an asshole, but I've seen you for a long time be negative about Google, and I don't think continuing to work there is going to make it any better for you or the company. There's a legally-questionable comment in your history, too, regarding ongoing litigation, which at my employer would be an immediate termination.

EDIT: I went back far enough to find that you're not anonymous.

[+] anigbrowl|14 years ago|reply
[Posted this earlier today when it turned up on google.com.au, but the thread had falled off the front page by the time I posted it. I thought people might find this interesting now that it's back.]

The doodle is reminiscent of a Minimoog [1], but with several simplifications to make programming easier and more musical.

1. http://en.wikipedia.org/wiki/Moog_synthesizer

Mixer section

The large knob at the left is overall level (which does not equate to silence at its minimum setting, probably for UI simplicity). The three knobs to the right govern the volume of 3 individual oscillators.

Oscillator section

The leftmost 3 knobs define the pitch octave range for each of the three oscillators. LO is a subsonic frequency mainly used for modulation purposes in real life. #2', 16', 8' etc. refer to the length, in feet, of the pipe on a pipe organ that will produce tones of that frequency. A 32 foot long pipe produces a very deep bass tone (about 16 Hz, probably sounds like noise on most speakers), a 16 foot pipe produces a tone exactly one octave higher, and so forth. There are no 64 foot pipes that I know of, hence the LO setting. It's not possible on this little synth, but normally you would use those super-low frequencies as modulation sources for other things. The two knobs in the center allow tuning of the oscillators across a 2-octave range. Really, this ought to be graduated in semitones. If you turn down the center oscillator and put the other two on identical settings, you should, in theory, get the same sound only twice as loud, but the doodle is a little bit buggy and sometimes pegs one oscillator an octave above or below the other. It's easiest to just reload periodically. On a real-life analog synth of that generation, the oscillators would drift out of tune and need to be calibrated periodically; also, the tuning would change as the machine warmed up over the first half-hour or so of operation, so early electronic keyboard players often had difficulty staying in tune with the band. It was this pitch instability that caused everyone to rush towards digital synthesis at the end of the 1970s, although nowadays you can get very stable analog oscillators.

The rightmost 3 knobs set the shape for each oscillator; triangle, saw, inverse saw, and pulse waves with 10%, 25% and 50% duty cycles respectively. I think there is something amiss with the display of the saw waves on oscillators 1 & 2. Saw vs. inverse saw makes no difference on a single oscillator but where you have 2 or 3 choosing different directions for the wave can lead to interesting textures. The shape of the oscillator affects the harmonic content thereof. A triangle wave sounds very close to a sine wave - a piercing pure tone - while being computationally inexpensive. (Stable sine waves are surprisingly hard to generate on the fly unless you have a lot of DSP power, and even digital synthesizer manufacturers often cheat by using lookup tables for sine waves rather than generating them.) A saw waves contains all possible harmonics and is a good basis for brassy sounds like those of trumpets. Square waves (pulse waves with a 50% duty cycle) sound 'hollow' because they only have odd harmonics, and are a good basis for synthesizing woodwind sounds, where the absorbent nature of the material dulls the sound somewhat. Combining pulse waves of different duty cycle can lead to texturally interesting effects, although this is much more noticeable when the length of the duty cycle can be modulated, as opposed to merely switched.

Filter section

Something has gone terribly terribly wrong here, because this does not behave like any Moog synthesizer I have ever used. The top left knob controls the filter cutoff of a low pass filter, ie the frequency above which higher harmonics will be cut off. This is sort of like the effect you get if you sing a continuous AAAAAH tone with your mouth open and then gradually close your lips. Normally the knob tot he immediate right could control resonance, which boosts the signal around the cutoff frequency and produces an intense whistling/shrieking sound as it is turned up to maximum. High resonance and low cutoff settings act like a spotlight upon the timbral complexity of the oscillator output and are a staple of electronic music.

2. http://www.timstinchcombe.co.uk/synth/Moog_ladder_tf.pdf

I am not sure what the rest of the knobs are supposed to do. They seem to allow oscillators 2 and 3 to be individually filtered, but unfortunately when I hold down a key and tweak the filter knobs the sound tends to break up. This is probably because the adjustment of filter and resonance controls in DSP require constant recalibration of filter coefficients, which is computationally expensive and not well implemented here. It is not normal to filter individual oscillators on an analog synthesizer. Normally one wants to apply a single filter to the mixed sound of the oscillators and modulate that with an envelope or low-frequency-oscillator - which is what I believe is supposed to be happening here, but it's too inconsistent for me to be sure. . Visually, this looks (slightly) reminiscent of a Moog Ladder filter [2], but that's usually a 4-stage transistor ladder, not a front panel set of controls. This is not how a synth of this style normally works, which is a real pity. It does not help that there are no tooltips; I've been making electronic music for 15 years and can't figure out exactly what's supposed to be going on here, so I feel bad for anyone who is trying to learn something from playing with this and getting frustrated. I tried looking at the javascript [3] but it's unreadable outside of an editor and I have neither the time nor the inclination to troubleshoot it.

3. http://www.google.com.au/logos/2012/moog.2.js

Envelope section

This is the simplest part; the envelope defines the volume behavior when you press a key. The topmost knob is attack, or how fast the sound fades in; very fast for a plucked instrument like a bass guitar, slow for a string sound. The sound swells to maximum over the duration of the attack time, then falls back to the sustain level, adjusted by the middle knob. The last knob governs release, how fast the sound fades away after the envelope completes its cycle. If you set this very short the sound will die even if you hold a key down. Due to some oddities in the input processing event queue, as with the oscillators, the envelope's behavior is rather less than consistent.

As for the switch and the modulation wheel, I'm not clear on what is connected to what, for the reasons described above. I'm guessing there is an invisible low frequency oscillator for vibrato/tremolo purposes (modulation either the base frequency or the amplitude slightly to give a sound some extra texture), but the lack of tooltips and inconsistent behavior make them difficult to use in any predictable way.

If you are fascinated by this tool but frustrated, as I was, by the implementation problems, then you might like Morningstar (http://bitterspring.net/ms/morningstar/) - a basic html5 emulation of a popular Korg synthesizer/groovebox. Or Audiotool (http://www.audiotool.com/app) - a fully fledged html5 electronic music tool that sounds quite good considering it runs in the browser, but which may be overly complex for the novice.

[+] whichdan|14 years ago|reply
Chrome or not, this is by and far my favorite Google Doodle. Every single knob works.
[+] Kiro|14 years ago|reply
Where can I read a more detailed technical explanation? I'm particularly interested in how they generate the sound.
[+] TeMPOraL|14 years ago|reply
Quite nice attention to detail, and also some interesting subtle hints:

- an arrow pointing to keyboard if you didn't pressed it

- a flash of light going through the mixer panel if you haven't used it

And also you can play by using keys from 1 to 0.

[+] gouranga|14 years ago|reply
I'd really like a standalone version of this :)
[+] jeremysmyth|14 years ago|reply
If you want something that isn't a toy and emulates all the best features of analogue synths, try AlsaModularSynth -- http://alsamodular.sourceforge.net/ -- also available as amsynth in many Linux repositories. It's got demos that emulate Moogs in all their glory.

Steep learning curve as you'd expect from a full modular synth, but lots of samples and demos, and works with MIDI so you can play it with a real keyboard.

[+] fuzzix|14 years ago|reply
I recommended the Minimoog VA VST to some people earlier:

http://home.no/gunnare/

A lot of fun if you have a Windows installation knocking about. Free VST host, if you need one:

http://www.hermannseib.com/english/vsthost.htm

Not quite the same thing, but it has the same level of accessibility in the interface - a testament to the engineers who put the Minimoog together.

I liked this brief history of the Minimoog:

http://www.youtube.com/watch?v=sLx_x5Fuzp4

edit

Similar (cross-platform) fun is to be had with the Bristol project's Mini:

http://bristol.sourceforge.net/mini.html

[+] rwhitman|14 years ago|reply
If you have an iPad I highly Moog's Animoog iPad app. Not a direct minimoog emulator, but it is excellent
[+] meatsock|14 years ago|reply
fl studio from image-line is a pretty great stand alone synth sequencer that does the sort of soft synthesis shown here with aplomb
[+] juanpdelat|14 years ago|reply
why it doesn't work on my iPhone if it's html5?
[+] LukaD|14 years ago|reply
It doesn't work because they probably haven't implemented the necessary html5 features on iOS' browser yet (e.g. Audio API).
[+] leeoniya|14 years ago|reply
working ok on my FF nightly
[+] laserDinosaur|14 years ago|reply
The hell? I can get this to work in Firefox, but not Chrome.
[+] thomasfl|14 years ago|reply
Best Google frontpage. Ever.
[+] zobzu|14 years ago|reply
clearly this one is very well done