What is a harmonic? An interactive comic about additive synthesis
40 points by suda
40 points by suda
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.
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!
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#...
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!)
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:
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.
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
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!
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?
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.
Thanks for this. The metadata disaster from quicktime should be cleaned up. And your tip about alpha helped me figure out the issue (the .webm were converted from apple's proprietary hevc and there were indeed alpha issues).