

Google's HTML5 synthesizer for Moog's 78th birthday - pak
http://www.google.com?moog

======
anigbrowl
[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.

~~~
pak
Nitpick--Audiotool is pretty much 100% Flash, except it also seems to load a
Java applet to gain MIDI access. It would be mindblowing if it were HTML5. The
UI alone (especially all the little details like the correct shadows on the
knobs and the wire layout, and the zoomability) would be an incredible
accomplishment to draw with HTML and <canvas>. As for the synthesis, I think
Audiotool predates the Web Audio API.

~~~
anigbrowl
You're right, I have no idea why I thought it was HTML5.

~~~
DavidAbrams
I thought I saw that too. It turns out that it falls back to Flash if your
browser doesn't support HTML 5's "audio" tag.

If anything, maybe this will prompt Apple and Mozilla to get on the ball and
support it.

------
moocow01
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
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...](http://www.phoboslab.org/log/2011/03/the-state-of-html5-audio)

~~~
pvidler
Thing is, the .com.au version worked fine in Safari this morning, but the
.co.uk version tells me I need a more modern browser this afternoon.

So it's not just being limited to browsers that are technically capable of
running it.

------
fungi
"Upgrade to a modern browser" that's a bit snarky... i'm on Firefox 12

~~~
rplnt
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).

~~~
sigkill
It's strange because Mozilla gives Google money, and I don't really know how
they make money from Chrome.

~~~
rplnt
Google gives money to Mozilla (and to Opera). They basically pay for users
using the search. They want to avoid the risk of Microsoft (or anyone else
really) paying more than they want to afford. I think Opera had bing as a
default search in some of the recent versions. Also, with Chrome they
encourage users to search more (instant search) => more ads, more money.

~~~
sigkill
Oh yes, I totally forgot Instant Search. So if I understood you correctly,
Google gives Mozilla money to set the home page to Google.com and not the
other way around. I guess that makes more sense that way.

Thank you.

------
jgrahamc
The amount of traffic that being on the Google Doodle gets you is stunning.
Moog signed up for CloudFlare in a hurry today.

------
richbradshaw
In case anyone is wondering, here is how to use it:
[http://4.bp.blogspot.com/-LBGGiW2zpUM/T7wKadv8ZBI/AAAAAAAAJM...](http://4.bp.blogspot.com/-LBGGiW2zpUM/T7wKadv8ZBI/AAAAAAAAJM4/Oe78w676X5k/s1600/moog12-key.png)

~~~
TazeTSchnitzel
Why not hear how from moog themselves? :D

<http://www.moogmusic.com/content/google-doodle-how>

------
j_col
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...](https://twitter.com/__DavidFlanagan/status/205166128178282496)

~~~
deelowe
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.

~~~
j_col
While I somewhat agree with you're comment, however you're not addressing the
fact that Google is using this to push their web browser Chrome.

~~~
jerf
Here's me addressing it: _I don't care_.

They aren't locking other browsers out (my FF 11 on Linux is working
adequately). They're going to market regardless, I'd rather see things like
this than raw ads.

I assume you never use Google since they just use search to push their ads?

~~~
j_col
Well it seems that Google seemed to care enough to change it:

[https://twitter.com/__DavidFlanagan/status/20542007304375501...](https://twitter.com/__DavidFlanagan/status/205420073043755010)

Kudos to Google for fixing this.

------
gulbrandr
As usual, the sprites:

<https://www.google.com/logos/2012/moog-hp-k-sprite.png>

<https://www.google.com/logos/2012/moog-hp-sprite2.png>

------
whichdan
Chrome or not, this is by and far my favorite Google Doodle. Every single knob
works.

~~~
masklinn
> Every single knob works.

Not a single one works for me, Chrome or not.

edit: actually, in Firefox (latest, non-nightly) it looks like it could work
(knobs can be activated but don't do anything). Likewise in a recent Webkit
nightly. But Chrome 17 is unresponsive, the doodle just links to a search.

~~~
sim0n
Works perfectly in my Chrome (19.0 on OSX).

~~~
masklinn
So, basically, Chrome 2 versions behind is not a modern browser but for some
reason Google forgets to tell me about it.

Nice.

------
modernerd
Here's a quick rendition of Doctor Who: <http://g.co/doodle/a7r7gh>

(Love the four track recorder.)

------
Kiro
Where can I read a more detailed technical explanation? I'm particularly
interested in how they generate the sound.

------
TeMPOraL
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.

------
LukaD
You can find all the controls explained here:
<http://www.google.com/doodles/robert-moogs-78th-birthday>

------
gouranga
I'd really like a standalone version of this :)

~~~
jeremysmyth
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.

~~~
anigbrowl
Jeepers, Ihaven't been to that page in several years and it looks _exactly the
same_. It's OK to tidy up the homepage once in a while, ALSA guys!

------
juanpdelat
why it doesn't work on my iPhone if it's html5?

~~~
LukaD
It doesn't work because they probably haven't implemented the necessary html5
features on iOS' browser yet (e.g. Audio API).

~~~
seclorum
In fact, Audio on Safari-iOS has been intentionally crippled by Apple (its not
"un-implemented" features, its intentionally-not-implemented features") so as
to prevent any disruption of iTunes revenue stream from Audio-playing
websites.

~~~
huskyr
That's not a fact. However, the fact _is_ that HTML5 audio is indeed crippled
on iOS because you need a user action every time you want to play some audio,
which also leads to lots of lag. However, even if that would be correctly
implemented the Moog synthesizer would only be possible if they added the Web
Audio API that Chrome and Firefox have.

~~~
TazeTSchnitzel
That sounds like intentional crippling. Apple haven't done that to avoid
annoying people, they've done it so you can't make games with sound on the
iPhone.

~~~
robmcm
They haven't removed the Geo Location API from Safari because it means
websites could steal your location. They added a dialogue to ask if you want
to allow them to use it.

I imagine a simular API for sound would surfice.

------
leeoniya
working ok on my FF nightly

------
laserDinosaur
The hell? I can get this to work in Firefox, but not Chrome.

------
kshitiz_grgs
On of the best google doodle :)

~~~
minaguib
This is sick. It even has permalinks for what you play ;)
<http://g.co/doodle/q4q9mg>

------
thomasfl
Best Google frontpage. Ever.

~~~
zobzu
clearly this one is very well done

