Advertisement
UI & Interface Sounds

How to Synthesize a Blip Sound Using Square Wave and Pitch Envelope

A signal-level breakdown of the square-wave blip, covering why the square wave harmonics make it survive a mix, how the pitch envelope reshapes the spectrum over time, the four envelope shapes that produce different characters, and a working implementation.

A square wave and a sine wave at the same frequency and the same loudness do not sound equally present in a mix. Play them side by side in isolation and the difference is modest. Play them under a music bed and the square wave cuts through while the sine wave disappears. That difference is the entire reason the square wave became the default for game blips, and it has nothing to do with the square wave sounding "retro."

The square wave's advantage comes from its harmonic spectrum. A mathematically perfect square wave contains only odd harmonics — the fundamental, then the third, fifth, seventh, and so on — and the amplitude of each harmonic falls off as 1/n. A sine wave contains only the fundamental. At 1000 Hz, a square wave has energy at 1000, 3000, 5000, 7000 Hz and beyond, while a sine wave has energy only at 1000 Hz. The square wave occupies five or six frequency bands at once, and a masker that covers 1000 Hz does not necessarily cover the other bands.

The pitch envelope is the second half of the design. A square wave with a fixed pitch is a tone; a square wave with a fast pitch movement is a blip. The envelope is what makes the sound read as an event rather than a note, and the shape of the envelope determines the character of the event. This article is about both halves: why the square wave behaves the way it does, and how the pitch envelope reshapes it into a sound that works as UI feedback.

The arcade menu blip guide covers the duty cycle and the historical hardware; this article is about the underlying synthesis principles that apply regardless of the specific duty cycle or frequency.

Why does a square wave survive a mix better than a sine wave?

The masking effect is the reason. When two sounds overlap in frequency, the louder one makes the quieter one harder to hear. A music bed with content at 1000 Hz will mask a sine wave at 1000 Hz almost completely, because the sine wave has no energy anywhere else. The same bed will mask only the fundamental of a square wave at 1000 Hz; the third harmonic at 3000 Hz, the fifth at 5000 Hz, and the seventh at 7000 Hz remain audible because the music does not have equal energy at all of those frequencies.

Harmonic Frequency (1000 Hz fundamental) Relative amplitude
Fundamental 1000 Hz 1.00
3rd 3000 Hz 0.33
5th 5000 Hz 0.20
7th 7000 Hz 0.14
9th 9000 Hz 0.11

The 1/n falloff means the harmonics get quieter as they get higher, but they do not disappear. The third harmonic at a third of the fundamental's amplitude is still well within the audible range, and in a dense mix it is often the third harmonic that the player hears first, because the fundamental is masked and the harmonic is not.

This is why a square wave blip can be quieter than a sine wave blip and still be more audible in the game. A sine blip at -18 dB peak disappears under music; a square blip at -22 dB peak is still present because the harmonics are doing the work the fundamental cannot. The perceived loudness of a square wave is higher than its measured peak level suggests, which is why the blip's level should be set by ear in context rather than by matching the peak of a sine reference.

The same property makes a square wave more fatiguing over repeated playbacks. The high harmonics are what the ear is sensitive to, and sustained exposure to them produces listening fatigue faster than a sine wave would. This is the tradeoff the blip designer makes when choosing a square wave: better presence in the mix, at the cost of a lower tolerance for repetition. The variation system guide covers how pitch variation reduces this fatigue.

What does a pitch envelope actually do to the spectrum?

The pitch envelope is usually described in musical terms — "a downward slide" — but the more useful description for synthesis is what it does to the spectrum over time. A moving pitch means the fundamental and all its harmonics are moving together, and the spectrum is sweeping through the frequency range during the blip's duration.

For a downward pitch envelope, the fundamental starts high and ends lower. At the start of the blip, the fundamental is at, say, 2000 Hz and the third harmonic is at 6000 Hz. At the end of the blip, the fundamental is at 1000 Hz and the third harmonic is at 3000 Hz. The entire spectrum has swept downward by one octave, and every frequency band the blip passed through has been briefly energized.

This sweeping is what makes the blip feel like an event rather than a tone. A fixed-pitch blip energizes a small set of frequencies for its duration; a pitch-enveloped blip energizes a broad range of frequencies as it sweeps. The ear reads the sweep as motion, and motion is what distinguishes a blip from a musical note.

The speed of the sweep determines the perceived character. A fast sweep (under 50 milliseconds for the whole descent) sounds sharp and aggressive, because the spectrum moves quickly and the ear has little time to track any individual frequency. A slow sweep (over 150 milliseconds) sounds smooth and continuous, because the ear can track the movement as a glide. For a UI blip, the fast sweep is almost always the right choice, because it produces the sharp "this happened" character that a blip needs.

The direction of the sweep determines the emotional register. A downward sweep reads as "energy leaving" or "conclusion" — it is the shape used by lasers, hits, and error tones. An upward sweep reads as "energy arriving" or "beginning" — it is the shape used by power-ups, pickups, and confirmations. The game sound effect guide covers the emotional mapping in more detail; for blips, the direction is the primary carrier of meaning, and the frequency range is secondary.

Which pitch envelope shapes produce which blip characters?

The pitch envelope is a curve, and the shape of the curve matters as much as its start and end points. Four shapes cover almost every blip use case, and each one produces a distinct character that the ear reads immediately.

Shape Curve Character Typical use
Linear down Straight line, high to low Neutral, mechanical System feedback, menu
Exponential down Fast start, slowing to end Punchy, energetic Lasers, hits, impacts
Linear up Straight line, low to high Expectant, rising Confirmations, pickups
Bounce Down, then slight up Cartoonish, playful Casual games, comedy

The exponential down sweep is the one most commonly used for action-game blips, because the fast start produces a sharp attack that reads as energy, and the slowing end produces a natural decay that matches physical dissipation. The linear down sweep is the one used for system feedback, because it is predictable and does not carry emotional weight.

The bounce shape is the one most often overlooked. It is a downward sweep followed by a small upward correction at the end, and it produces a sound that reads as playful or cartoonish. The shape is common in casual games and in any context where the blip is meant to feel light rather than serious. A straight downward sweep at the same frequency and duration will sound mechanical; the bounce makes it sound alive.

The amplitude envelope shapes the pitch envelope's effect. A pitch sweep with a slow amplitude attack will have its sweep partially hidden by the fade-in, because the ear hears the average pitch rather than the moving pitch. A fast amplitude attack lets the sweep be heard clearly. For most blips, the amplitude attack should be under 2 milliseconds, which is fast enough that the pitch sweep is fully audible from the first moment of the sound.

How do you build a square-wave blip with a pitch envelope in code?

The implementation has four parts: the square wave oscillator, the pitch envelope, the amplitude envelope, and the mixing to output. The code below is the complete synthesis for a single blip, using the Web Audio API's oscillator and gain nodes.

function playBlip({
    startFreq = 2000,
    endFreq = 800,
    duration = 0.06,
    volume = 0.6,
    dutyCycle = 0.25
} = {}) {
    const ctx = getAudioContext();
    const now = ctx.currentTime;

    // Web Audio's oscillator node does not expose duty cycle
    // directly. To approximate a narrow pulse, we use a custom
    // periodic wave built from the Fourier coefficients of a
    // pulse wave at the desired duty cycle.
    const harmonics = 16;
    const real = new Float32Array(harmonics);
    const imag = new Float32Array(harmonics);

    for (let n = 1; n < harmonics; n++) {
        // Amplitude of the nth harmonic of a pulse wave
        // at duty cycle d is (2 / (n * PI)) * sin(n * PI * d)
        imag[n] = (2 / (n * Math.PI))
                * Math.sin(n * Math.PI * dutyCycle);
    }

    const pulseWave = ctx.createPeriodicWave(real, imag);

    const osc = ctx.createOscillator();
    osc.setPeriodicWave(pulseWave);

    // Pitch envelope: exponential downward sweep
    osc.frequency.setValueAtTime(startFreq, now);
    osc.frequency.exponentialRampToValueAtTime(
        endFreq, now + duration
    );

    // Amplitude envelope: near-instant attack, fast decay
    const gain = ctx.createGain();
    gain.gain.setValueAtTime(0, now);
    gain.gain.linearRampToValueAtTime(volume, now + 0.001);
    gain.gain.exponentialRampToValueAtTime(0.001, now + duration);

    osc.connect(gain);
    gain.connect(ctx.destination);

    osc.start(now);
    osc.stop(now + duration + 0.01);
}

The createPeriodicWave call is the part that most Web Audio blip tutorials skip. The built-in type = 'square' produces a 50 percent duty cycle square wave, which is not the thin pulse that a blip needs. The periodic wave construction uses the Fourier series for a pulse wave, where the amplitude of the nth harmonic is proportional to sin(n * PI * d), with d being the duty cycle.

A duty cycle of 0.25 produces a pulse wave that spends 25 percent of its time at the high value and 75 percent at the low value. The Fourier construction above produces the correct harmonic amplitudes for that waveform, and the result is the thin, nasal character that the arcade blip guide describes.

The pitch envelope uses exponentialRampToValueAtTime rather than a linear ramp, because the ear perceives pitch on a logarithmic scale. A linear ramp from 2000 Hz to 800 Hz spends more perceptual time in the upper half of the range than a logarithmic sweep would, which makes the blip sound top-heavy. The exponential ramp produces a sweep that is perceptually uniform, which is what makes the descent feel natural.

The amplitude envelope uses an exponential ramp for the decay, which is the same choice the Web Audio blip tutorial recommends. The exponential decay matches the way physical sounds fall off and produces the characteristic "blip" shape that a linear fade does not.

How do the parameters interact when tuning a square-wave blip?

The parameters are not independent. Changing the duty cycle changes the perceived frequency, changing the pitch range changes the perceived duration, and changing the amplitude envelope changes the perceived character of the pitch sweep. A designer who treats the parameters as independent will spend a long time tuning a blip that never quite works.

The specific interactions:

Duty cycle and perceived frequency. A narrower duty cycle emphasizes the higher harmonics, which the ear reads as a higher pitch even when the fundamental is unchanged. Going from a 50 percent square to a 25 percent pulse at 1000 Hz makes the blip sound roughly 200 to 300 Hz higher. The fix is to lower the fundamental frequency when narrowing the duty cycle, so the perceived pitch stays where the designer intended.

Pitch range and perceived duration. A wider pitch sweep takes longer to complete perceptually, even if the actual duration is the same. A 2000-to-800 Hz sweep over 60 milliseconds feels longer than a 1500-to-1000 Hz sweep over the same 60 milliseconds, because the ear tracks the moving pitch and the wider movement takes more perceptual effort. If a blip feels too long, narrowing the pitch range is often a better fix than shortening the duration.

Amplitude envelope and pitch sweep clarity. A fast amplitude attack makes the pitch sweep audible from the start of the sound; a slow attack hides the first part of the sweep under the fade-in. A 1 to 2 millisecond attack is the threshold: below it, the sweep is fully audible; above it, the beginning of the sweep is lost. A designer who wants a smoother blip and lengthens the attack will find that the blip sounds like it starts on the wrong pitch, because the first part of the sweep is being masked by the amplitude ramp.

Frequency range and speaker response. A blip that sweeps from 2500 Hz to 1000 Hz will have its upper portion boosted by laptop speakers (which peak around 2000 Hz) and its lower portion attenuated. The same blip will sound different on headphones, where the response is flatter. The frequency range should be chosen for the primary playback environment, not for a neutral reference that does not exist in practice.

The practical approach is to tune the parameters in a specific order: first the frequency range, then the duty cycle, then the pitch sweep shape, then the amplitude envelope. Changing the frequency range after setting the duty cycle requires retuning the duty cycle, and changing the pitch shape after setting the amplitude requires retuning the pitch. The order matters because each parameter constrains the ones that follow.

When should a blip use a square wave, and when should it use something else?

The square wave is the default for game blips, but it is not the right choice for every context. The cases where a different waveform works better are specific, and they are worth knowing before committing to the square wave for every blip in a project.

A sine wave is the right choice when the blip needs to be neutral. A system feedback blip in a productivity app, a confirmation sound in a setting where the user expects calm, a menu blip in a game with an ambient aesthetic — these are all cases where the square wave's harmonics are a liability rather than an asset. The sine wave is quieter in the mix but softer on the ear, which is the correct tradeoff for a context where the sound is not competing with anything.

A triangle wave is the right choice when the blip needs to be slightly brighter than a sine but softer than a square. The triangle wave contains odd harmonics like the square wave, but their amplitude falls off much faster (as 1/n squared rather than 1/n), which means the harmonics are present but subdued. A triangle wave blip reads as "electronic but not harsh," which is appropriate for UI in games that want a slightly retro character without the full arcade aggression.

A noise burst is the right choice when the blip needs to sound like an artifact rather than a tone. A glitch sound, a corrupted data sound, an error that is meant to feel mechanical rather than musical — these are cases where the tonal character of any waveform is wrong, and a short burst of filtered noise is what the context needs. The noise burst is not a blip in the strict sense, but it fills the same role in a UI, and the noise and filter guide covers the technique for producing it.

An FM tone is the right choice when the blip needs to feel modern rather than retro. The FM synthesis that the later arcade chips used produces a metallic character that a square wave cannot reproduce. A blip generated with FM sounds like a 1988 arcade cabinet rather than a 1982 one, and the choice between the two is a choice about which era the game is imitating. The FM synthesis guide covers the technique.

The square wave remains the default because it is the most versatile. It can be tuned to sound harsh or relatively soft depending on the duty cycle, it carries the retro association that many games want, and it is simple to generate with any synthesis tool. A designer who understands the frequency range, the duty cycle, and the pitch envelope can make a square wave blip that fits almost any context, and the alternatives are refinements that become useful only when the square wave has been tried and found wanting.

Compare Square and Sine Blips Side by Side

Open the SfxMaker blip generator and create two blips: one with a square wave at 25 percent duty cycle and a downward pitch sweep, and one with a sine wave at the same frequency and envelope. Play them under a music bed and notice how the square wave remains audible while the sine wave disappears.

Open Blip Sound Generator →
Advertisement