Hacker News Reader

Comment by skybrian | Hacker News Reader

This is doing it the hard way if you just want to generate a sine wave, because WebAudio’s OscillatorNode [1] will do it for you, no WebAssembly required. It likely works in more browsers too.

You can also use setPeriodicWave() to have it iterate over any sampled waveform you like. There is enough in the JavaScript API to fool around with basic subtractive synthesis where you connect an oscillator to a filter.

I also recommend Syntorial [2] for understanding what subtractive synthesis is capable of. It won’t help you synthesize real instruments, but you learn what the various knobs on synthesizers do by trying to reproduce increasingly sophisticated synthesizer sounds.

Learning the basic math is useful too though.

[1] https://developer.mozilla.org/en-US/docs/Web/API/OscillatorN... [2] https://www.syntorial.com/

View on HN

100%, I looked past APIs as I wanted to learn myself audio programming audio autodidactically.

I think you provided a great guide for people looking to do the same, I appreciate the write up! Real time audio is a tricky thing to get into and even moreso in the browser, starting with a sine wave here is a great launch point for more experiments.

Is there a way to supply a PeriodicWave a specific wavetable or series of floating points to represent the wave form? It appears from the docs that PeriodicWave is a way to generate waveforms by shaping sinewaves

One problem I've had in the past trying to do audio on the web is I struggled to find any reference material on how to generate my own waveforms and rely on the browser APIs only for playback. This tutorial, with the AudioWorklet, is the first piece I've seen on how to easily do this.

Oops, I misremembered. For looping a wavetable, you'd want to use AudioBufferSourceNode [1].

If it's a static waveform, you could also do a Fast Fourier Transform and hard-code the resulting table into your program as a Periodic Wave. Apparently, this is how the prefined waveforms of OscillatorNode work. [2]

Generally speaking, you need to read about all the different kinds of nodes that WebAudio gives you and wire them together, sort of like you would with a modular synthesizer. For experimenting with audio synthesis, I'd recommend trying out Rack [3] to figure out what kinds of sounds you want to make, then coding it in JavaScript if you can find equivalent nodes. (Rack is going to have much more capable modules, though.)

[1] https://developer.mozilla.org/en-US/docs/Web/API/AudioBuffer... [2] https://webaudio.github.io/web-audio-api/#oscillator-coeffic... [3] https://vcvrack.com/

This probably isn't much help, but if you've got an arbitrary waveform you can do a Fourier transform on it to decompose it into a list of additive sine waves (each wave parameterized by amplitude and frequency, ignoring phase), and then play all those sine waves together to make your sound. I have no idea about the implementation details here (I can imagine that this might get computationally intensive!) but in theory this should work.

If there's a will there's a way :) even if unpractical it's definitely a fun thought!

> It likely works in more browsers too

Never underestimate Safari. Its support of WebAudio is pathetic.

Reply on news.ycombinator.com