Formant vowels: make a sound say a, i, u, e, o

1. Listen first

Press Run and listen to a sustained Sega PSG square wave at 130 Hz. The filters move through a → i → u → e → o. The source pitch stays the same; the resonant shape changes.

In the embedded Playground, Run starts playback and Stop stops it. After editing during playback, press Run again to apply the updated code. Keep the same liveFx name to retain its filter state. For a fresh comparison, Stop and then Run. Stop other embedded Playgrounds before listening.

Open this code in a separate Playground tab ↗

2. A voice has a source and a resonant shape

The vocal folds provide a vibrating source. The vocal tract emphasizes some frequency regions. Those broad resonant regions are called formants. A filter can give an electronic source a similar spectral shape, even though it is not a human vocal tract.

harmonic-rich input
↘ band-pass F1 ↗
→ band-pass F2 → weighted sum → dry/wet mix → output
↗ band-pass F3 ↘

The three filters receive the same input in parallel. We add their outputs; the sound does not pass through F1, then F2, then F3 in series.

Actual formants depend on the speaker and articulation. These are illustrative targets for an experiment, not universal measurements of Japanese vowels. See the Oxford introduction to acoustic phonetics (source–filter theory and vowels).

3. Read the controls

context contains settings passed to audio processing; state carries history to its next call. The vowel settings are names defined by this example, not new built-in FX APIs. Compare the numbers in the liveFx context with the process callback that transforms the input. Running the same-named code during playback sends the edited settings to the audio processor.

4. Switch vowels, then connect them

The vowel setting is an index: 0 = a, 1 = i, 2 = u, 3 = e, 4 = o. First set autoVowels: false, select one index, and run the edited code again. Then compare vowel: 0 and vowel: 1. Only the filter targets change.

Return to autoVowels: true. Each target lasts vowelSeconds: 1.4 seconds. The processor carries its position across audio blocks and changes the resonances gradually instead of restarting a filter at each boundary. It holds each vowel for the first 60% of its interval, then morphs toward the next during the remaining 40%.

1. Set mix: 0 to hear the unprocessed square wave, then restore mix: 1.
2. Set autoVowels: false and vowel: 0, then change only F1 in the first formants row from 800 to 600 Hz. Keep the other values unchanged to hear the effect of changing one resonance.
3. Compare fixed vowels with automatic switching. Try vowelSeconds: 0.7 and 2.5.
4. Compare transitionMs: 20, 60, and 200. Longer transitions join the vowel colors more gradually.
5. Use Spectrum to watch the spectral envelope move while the spacing between harmonics stays approximately the same.

A vowel is not a recording or a syllable. These five targets suggest mouth shapes; they do not add consonants or pronounce words.

5. Keep the filter running smoothly

process(input, output, state, context) runs on the AudioWorklet audio thread. Each input[ch] is one audio channel, such as left or right; it is not a YM2612 musical channel. Each channel keeps its own three filter histories in state. Control position is shared so both sides move together.

The example uses trapezoidal state-variable band-pass filters, with coefficients calculated from the AudioWorklet's actual sampleRate. The same frequency settings work at 44.1 kHz and 48 kHz. See Cytomic's linear trapezoidal SVF derivation for the filter method.

The processor retains filter history across blocks and same-name code updates. It smooths target frequency, gain, and mix changes over time; transitionMs sets the movement time scale in milliseconds. It also bounds settings, rejects non-finite calculations, and limits output. Very large gain can still squash the sound; begin with the supplied settings.

This demonstration needs harmonics to shape. A sine wave has only one frequency component, so it cannot provide a convincing set of vowel resonances. The Sega PSG square wave contains odd harmonics. Its default clock also limits its lowest tone to about 109 Hz; try source frequencies around 110–260 Hz. It is a compact chip-based carrier, not a complete model of vocal-fold excitation.

6. Compare input and output in FX Monitor

After Run, open FX Monitor and choose formant-vowels as the target. Blue is input and orange is output. Use View → Spectrum to compare the frequencies emphasized by the filter; use Oscilloscope for the waveform shape.

Keep a fixed Y range when comparing waveform heights. Input and output share the display scale. In Spectrum, look at the broad shape of the harmonic peaks: peaks sit near the carrier's harmonics, not necessarily exactly at F1, F2, and F3. A filter reshapes existing frequency content rather than generating a new oscillator at each formant.

The monitor is a short-time view. Listen over several cycles and compare the motion rather than expecting every frame to show three isolated peaks. The effect runs after the sound sources, so it also processes other audio you add to this Playground.

These are synthetic vowel-color experiments. They do not reproduce LPC hardware, recognize speech, add consonants, or promise a natural speaking voice. Audibility depends on the carrier, pitch, playback device, and listener. Compare at a comfortable level.

FX introduction index (work in progress)