What is a harmonic? An interactive comic about additive synthesis

29 points by suda 5 hours ago on lobsters | 8 comments

ifreund | 3 hours ago

Very nice interactive examples!

Am I going crazy or is the 3rd to last note of the melody in the Timbre example a half step too low?

I hear C B A G# F G# A but my ear says that the F should be an F#...

[OP] suda | 21 minutes ago

Thanks! And yes, you are totally right. I was struggling with figuring out ABC notation and things jumped around a bit. It should be fixed (as is the rush into the B section!)

chrismorgan | an hour ago

The second part, on timbre¹, is the key to pipe organ synthesis. Pipe organs have a variety of sounds, and the differences all boil down to the amplitudes of the different harmonics. Historically, pipe organ synthesis has involved a large number of parameters to control this, which is a lot of work. But somewhat more recently, Colin Pykett investigated the topic and ultimately came up with trendline synthesis, allowing you to model all of the normal types of pipes with no more than four parameters—far more manageable!

Then, you say, why doesn’t that flute, clarinet, violin sound like a pipe organ? Room acoustics. Seriously, echoes make up most of the effect of a pipe organ. And guess what? You can map the impulse response of a room and apply convolution, and the result is basically perfect.

End result: using something like the Web Audio API, you can synthesise a startlingly realistic organ pipe in significantly less than a hundred lines of code (plus an impulse response audio file for your desired room). The synthesis is the easy part—it’s gluing the organ together that will take more code.

I doubt I’ll get to it this year, but I’m really looking forward to adding a pipe organ to my website.

—⁂—

¹ You say “say it tambre”—it’s not consistently so. Growing up in Australia, I did come across /ˈtæmbər/ sometimes, but I heard /ˈtɪmbər/ a lot more. Wikipedia recognises these two and one other pronunciation as common.

[OP] suda | 54 minutes ago

Never heard of trendline! That's really cool. Yeah, organs were the original additive synths, goes back quite a long way to the roman golden age and water organs!

chrismorgan | 4 hours ago

The interactive part doesn’t work for me, Firefox on Linux. Relevant excerpts from my console:

Specified “type” attribute of “video/mp4; codecs=hvc1” is not supported. Load of media resource /wp-content/uploads/dot-dev-tailwind/videos/Harmonic-220-Alpha-HEVC.mov failed. Trying to load from next <source> element.

All candidate resources failed to load. Media load paused.

And apparently this stops even the audio from working.

When I load the files directly:

  1. The .mov file (incidentally served as video/quicktime, video/mp4 is wrong, but it doesn’t make a difference) plays just fine when loaded directly, and ffprobe tells me it is hvc1, so I’m not sure why Firefox isn’t accepting it in that way.

  2. The .webm file isn’t playing at all, and I don’t know why.

    Media resource https://melatonin.dev/wp-content/uploads/dot-dev-tailwind/videos/Harmonic-660-Alpha.webm could not be decoded, error: Error Code: NS_ERROR_DOM_MEDIA_FATAL_ERR (0x806e0005)
    Details: auto mozilla::MediaChangeMonitor::CreateDecoderAndInit(MediaRawData *)::(anonymous class)::operator()(const MediaResult &) const: Unable to create decoder

[OP] suda | 3 hours ago

Oh no! It works for me on FF focus on the iphone. I’m out in the city but I’ll check FF Linux when back home. Thanks for saying something!

chrismorgan | 50 minutes ago

Are any iOS browsers using their own engines yet? It’s been a couple of years since Apple grumblingly mostly permitted it for the EU only, I think?

vbernat | an hour ago

It looks odd with ffprobe:

  Metadata:
    COMPATIBLE_BRANDS: qt
    MAJOR_BRAND     : qt
    MINOR_VERSION   : 0
    ENCODER         : Lavf61.7.100
  Duration: 00:00:03.00, start: 0.000000, bitrate: N/A
  Stream #0:0: Video: vp9 (Profile 0), yuv420p(tv, bt709/unknown/unknown, progressive), 1920x1080, SAR 1:1 DAR 16:9, 30 fps, 30 tbr, 1k tbn (default)
    Metadata:
      alpha_mode      : 1
      HANDLER_NAME    : Core Media Video
      VENDOR_ID       : appl
      ENCODER         : Lavc61.19.101 libvpx-vp9
      DURATION        : 00:00:03.000000000

There are many fishy things: incomplete colorspace, alpha in metadata but pixel format without alpha.