Hacker News Reader

Comment by jancsika | Hacker News Reader

Side note-- I can just feel the frontend dev's juice running out as they put the finishing touches on the volume slider on that audio player. It suspiciously only updates the attenuation on mouseup.

Here's my hypothesis: they initially implemented it the obvious way on mousemove (or whatever similar immediate event). Then they a) noticed the horrible zipper noise that came from doing that, b) felt dread at the idea of plumbing into the webaudio API, c) said "aw fuck it" out loud and d) bound the event to mouseup.

Does the dev of that framework post here? If so, am I close on this one? If so I can commiserate from the opposite end-- I spent a long time getting audio stuff like this just right and then fudging text alignment for lack of juice.

View on HN

It's simpler than that. It's an <input type="range"> element with a 'change' event listener, which is the most obvious way to implement a volume slider. The 'change' event fires on mouseup.

What causes the "horrible zipper noise"?

Any changes in waveforms that are not smooth can cause percussive sounds (that's what percussions are). Playing audio suddenly causes a pop, and changing audio levels abruptly causes a weird zipper sound (the sound of a thousand MIDI drums playing in a few milliseconds).

The reasons are very interesting: your brain does a Fourier Transform (sort of) in real time to listen to audio. It allows you to separate two people or two instruments producing sounds at the same time, and abrupt changes will cause this transform to product artefacts.

The right way of doing it is to always make progressive changes to the gain level. This property is often used in audio engineering to "add or remove punch" in recordings: you can decrease the attack level to make the gain changes more aggressive and add punch, or lower it to make it smoother, over do it and it sounds muffled. In more concrete words: use the setTargetAtTime WebAudio API.

Said another way, an instantaneous change in gain causes a step change in the audio signal. A step change isn't physically possible, but is equivalent to the summation of harmonic frequencies up to infinity. Your speakers try their best, and end up playing all the harmonic frequencies within their range of 20Hz-20Khz or so. This happens to produce a similar sound as a percussion instrument.

It's more the cochlea performing some kind of convolution of roughly sinusoidal wavelets with the audio signal, bringing the signal from temoporal to frequency domain, right? Does more neurological post-processing the cochlear output bring it closer to a Fourier transform?

Both are very similar and have a lot of parallels, enough that I generally call what humans do "kind of Fourier Transform", but "convolution of roughly sinusoidal wavelets" is definitely more correct.

For example, you can explain to someone with not much signal knowledge why a 15kHz square wave sounds exactly like a 15kHz sine wave to humans by looking at the harmonics through a Fourier Transform.

I do believe most of the magic happens in the brain though, the cochlea is a super advanced biological microphone, but the brain is responsible for harmonic and rhythmic processing. The brains figures out what is a voice, an instrument, or a percussion. My understanding is that it stores short-term temporal information needed to make sense of realtime information: a note alone might be perceived differently depending on the harmonic and rhythmic context ("wrong note").

Can you avoid that by debouncing mousemove or (similar) making the slider values discrete?

Yes, anything that prevents multiple rapid changes would work

Reply on news.ycombinator.com