Hacker News new | past | comments | ask | show | jobs | submit login
Google's HTML5 synthesizer for Moog's 78th birthday (google.com)
192 points by pak on May 23, 2012 | hide | past | favorite | 91 comments



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.


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


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.


Which is fine of course. But if you already test features a la modernizr then use that power for good and tell me that my browser (which is very modern, thank you very much) lacks support for X, maybe 'audio'.

It's the words I'm annoyed by, not the fact that it doesn't work. Chrome is crap in my world (entirely subjective opinion) and branding it as the only 'modern' piece of kit is.. just the same.


Does Safari have a WebAudio implementation? I'd understood that it's Chrome only.

And hasn't Mozilla had its own WebAudio implementation since FF4?

    https://developer.mozilla.org/en/Introducing_the_Audio_API_Extension


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.


They are as bad as Microsoft now. Microsoft used to show the "upgrade to a modern browser" banners to everyone. At least now they can actually say it's modern, before it was linking to IE8.


Firefox 12.0 on Linux here.

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

I gave my monitor the middle finger.


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.


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.


Funny, it actually doesn't work for me on chrome but does on FF


It works fine in Opera, for once.


I have firefox 12 (release) on Windows and it works fine.


On the right, you can play and record compositions.

When I tried opening someone's saved song in Firefox, the Play button did nothing. But it worked in Chrome.


At least playing my own records works. I don't have a link to someone elses so I can't test it. They seem to have slightly changed the player though, from the last time I checked. There was no arrow pointing at the keys for instance.

Adding to my previous: it works _and_ there is no upgrade notification.


It didn't work for me on Chrome, and it worked fine on FireFox. I have version 19m.


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


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


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


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


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


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.


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.


I'm on Firefox 12 and it worked perfectly.


That's the point. It works perfectly fine in Firefox 12 and yet they tell you to upgrade to a modern browser.


I'm on Firefox 12 and it does absolutely nothing. I also use Chrome and it works fine on that.


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


In case anyone is wondering, here is how to use it: http://4.bp.blogspot.com/-LBGGiW2zpUM/T7wKadv8ZBI/AAAAAAAAJM...


Why not hear how from moog themselves? :D

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


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


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.


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.


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.


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?


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

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

Kudos to Google for fixing this.


As long as those features are standards compliant, I'm fine with it. This type of competition is a good thing (tm). It pushes the web forward.


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.


I'm sorry, but I think you must be responding to me by mistake. I never worked for Google, no idea where you got that from.


http://news.ycombinator.com/item?id=3901899

If you don't work at Google, your wording is a suspiciously odd mistake, and a misrepresentation.


Yes, and where do I say there that I work at Google?


Holy shit, really? You're really not seeing this? Let's start at the parent[1] and paraphrase.

> OP: <joke about free time>

>> You: I'd rather they do something other than doodles with their time.

>>> Commenter: Oh, but the doodles solve real problems!

>>>> You: Google's doodles perpetuate the image that the CORPORATION I WORK AT is a fun place to be, helping to improve OUR image and attract the right recruits.

Whose image are the doodles improving other than Google's? What is the intended company for recruits that are tickled by a Google Doodle? You say the words "I work at" and "our" in your comment. I resent having to explain this word by word. I now see an alternative explanation, which would be that you're responding to "real problems" instead, but your timing is extraordinarily awkward if that is the case and makes no sense in context.

Obviously, I left that comment with the impression that you work for Google. It was only after I stared at it for fifteen minutes as a result of this discussion that I realized there could be an alternative meaning. You need to be more careful about how you word things.

[1]: http://news.ycombinator.com/item?id=3898055


Sorry, but you have misinterpreted that. Perhaps quotes would have helped?

> More like helping to perpetuate the image that "the corporation where I work is a "fun" place to be".

...where I'm quoting a Googler (not me).


Tremendously. The quotes there entirely change the comment. The language leading up to your quotation gives no indication that you are quoting someone else at all.

I also love that I'm gray in less than sixty seconds for trying to help you be a little more clear in your comments due to a pretty severe misunderstanding.


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


Great breakdown. I took a quick look at the HTML, and this is what I got from the div ids, listed spatially:

Mixer Section:

  "mastervol"             "moog-volume2"

                          "moog-volume1"

                          "moog-volume3"
Oscillators Section:

  "moog-osc2-rg"          "moog-osc2-pb"          "moog-osc2-wf"

  "moog-osc1-rg"                                  "moog-osc1-wf"

  "moog-osc3-rg"          "moog-osc3-pb"          "moog-osc3-wf"
Filter Section:

  "cutoff"                 "attacktime"

  "moog-glide"             "decaytime"

  "contouramount"          "sustainlevel"
Envelope Section:

  "moog-loudness-attack"

  "moog-loudness-decay"

  "moog-loudness-sustain"
It looks like that confirms pretty much everything you described. For the filters, it looks like the filters section of the Minimoog panel, but rearranged a bit in order to form an "O."


Weird, the glide was in the filter section. I was getting so confused as to where that was being set


PS I was (superficially) acquainted with Robert Moog as I used to work in the synth biz and would meet him at trade shows sometimes. He would have been very pleased to see his basic ideas continue to fascinate people almost 50 years later.


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.


Actually, check this out: http://blog.joa-ebert.com/2011/11/11/project-hiddenwood/

Audiotool has been working on using only HTML5 and JavaScript (although who knows whether they'll ever start using that in their real product).


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


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.


Here's a guide to the Google Doodle with the Knobs and switches labeled:

http://8.mshcdn.com/wp-content/uploads/2012/05/Moog-Doodle-G...


According to Wikipedia, numerous organs have a stop labelled 64', and exactly two in the world have a true, open 64' stop (that is, have a pipe that is literally 64' long): https://en.wikipedia.org/wiki/Organ_stop#Notable_organ_stops


Here's a video walkthrough: http://www.youtube.com/watch?v=N7AHvrKCTlA



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


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


Works perfectly in my Chrome (19.0 on OSX).


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

Nice.


How are you still using Chrome 17? You should have been auto-updated a long time ago.


> You should have been auto-updated a long time ago.

GSU has been banned from my machine (since their GSU/Google Earth shenanigans), and Chrome has no built-in ability to update without GSU (or even say that there's an update available). So it gets updated when I think about updating it.

Not that I care much about it, my primary (if not only, due to tech demos like this one) use for Chrome is as a flash player.


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

(Love the four track recorder.)


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


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.


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


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


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.


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!


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


Thanks for links :)


If you have an iPad I highly Moog's Animoog iPad app. Not a direct minimoog emulator, but it is excellent


fl studio from image-line is a pretty great stand alone synth sequencer that does the sort of soft synthesis shown here with aplomb


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


"html5" can refer to just the core markup specification, or it can refer to an entire collection of specifications for modern javascript APIs[1] in various stages of completion. No browser implements all those specifications.

[1]http://upload.wikimedia.org/wikipedia/commons/f/f7/HTML5-API...


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


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.


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.


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.


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.


Audio on Safari for iOS is not crippled, in fact, Google Music[1] and other apps, for example GrooveShark[2] work on Safari. [1] http://play.google.com/music/listen [2] http://html5.grooveshark.com


I really don't think that's the reason. Not only does Apple not actually make very much revenue from iTunes, it is probably more to do with audio hardware on an iphone being limited.


Not only does Apple not actually make very much revenue from iTunes

Really? I guess 6% of it's net sales isn't a huge amount i guess, but when that equates to £6.3 billion I wouldn't regard that as small fish.


Fair enough, nevertheless the motivation just doesn't ring true to me. Apple doesn't cripple things to protect revenue streams. They cripple things to maintain control.


Zing


That's crazy, next they will be banning Flash in the browser ;)


working ok on my FF nightly


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


On of the best google doodle :)


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


Best Google frontpage. Ever.


clearly this one is very well done




Consider applying for YC's W25 batch! Applications are open till Nov 12.

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: