Advertisement
UI & Interface Sounds

Creating Blip Sounds with Granular Synthesis for Unique Game Audio

Why granular synthesis seems like the wrong tool for a 40-millisecond blip, the parameter ranges that make it work anyway, and the specific cases where a granular blip sounds meaningfully different from a standard oscillator blip.

Granular synthesis is built on a contradiction when applied to a blip. The technique works by overlapping many short grains of a source sample, and the overlap is what produces the continuous texture that granular is famous for. A blip is 30 to 60 milliseconds long. A single grain is typically 10 to 100 milliseconds. The math does not obviously work: the grain is as long as or longer than the entire sound, and there is no room for overlap.

And yet a granular blip is possible, and in specific contexts it produces a sound that no oscillator can produce. The trick is not to use granular as it is normally used. It is to use it as a spectral shaping technique applied to a very short source, where the "grain" is the blip itself and the source material determines the harmonic content in a way that a single oscillator cannot.

This article is about the specific ways granular can be applied to short UI sounds, the parameter ranges that work, and the cases where a granular blip is worth the extra complexity over a standard oscillator. The general granular synthesis guide covers the technique for sustained textures; this article is about what changes when the target is a blip instead of a texture.

Why is granular synthesis a poor fit for a blip in principle?

The standard granular engine has three requirements that a blip violates. The first is overlap: grains need to overlap to produce a continuous sound, and the overlap requires the grain duration to be shorter than the interval between grain starts. The second is a source buffer: grains are drawn from a longer sample, and a blip's total duration is often shorter than the buffer the grains would need. The third is grain count: a granular texture typically uses 20 to 200 grains per second, and a 40-millisecond blip at 200 grains per second contains only 8 grains total.

Requirement Standard granular Blip constraint
Grain overlap 2x to 4x overlap needed No room for overlap in 40 ms
Source buffer 0.5 to 10 seconds Grain may be as long as the source
Grain count 20 to 200 per second 8 to 12 grains total
Perceived result Continuous texture Series of clicks, not a blip

If you set up a standard granular engine with default parameters and trigger it for 40 milliseconds, the result is not a blip. It is a click, or at most two clicks, at whatever grain size you configured. The texture that granular normally produces never develops, because there is not enough time for the grain overlap to fill the gaps.

This is the reason most granular implementations do not bother supporting short durations. The technique was designed for textures, and the parameter defaults are tuned for textures. Using it for a blip requires rethinking the parameters from the ground up rather than adjusting them slightly.

What does a granular approach actually contribute to a blip?

The value of granular for a blip is not the texture. It is the ability to use a short recorded or synthesized source as the raw material for the blip, and to extract a specific fragment of that source with a specific pitch and a specific envelope. In this usage, the granular engine is functioning as a very fine-grained sampler rather than as a texture generator.

The specific difference from a standard oscillator blip is the source material. A 1000 Hz sine wave blip is a pure tone with a single harmonic. A granular blip that draws a 15-millisecond grain from a recorded metallic click has whatever harmonics that click contains. The result sounds like a metallic click compressed into a blip shape, which is a character that no pure oscillator can produce.

The technique that makes this work is a single-grain blip. Instead of triggering dozens of grains, the engine triggers one or two grains, each shorter than the total blip duration, with a windowing envelope that shapes the grain into a blip.

Parameter Standard granular Single-grain blip
Grain size 10 to 50 ms 8 to 20 ms
Grains per trigger 20 to 200 1 to 3
Overlap Essential Optional (for layering character)
Source buffer 0.5 to 10 seconds 50 to 500 ms
Window function Hann Hann, or a custom blip envelope

The single-grain approach is technically granular in that it uses a windowed fragment of a source, but it is missing the overlapping and randomization that define the granular aesthetic. What it keeps is the source material, and the source material is where the character comes from.

Which source material actually produces a good granular blip?

The source determines everything about a granular blip, because the source's spectral content is what the grain carries. A source with no interesting harmonics produces a grain with no interesting harmonics, which sounds like a sine wave blip with extra steps. A source with character produces a grain with character, which is the entire point.

Source type Character Blip use
Metallic click (recorded) Bright, ringing Sci-fi, mechanical UI
Wood tap (recorded) Warm, short decay Rustic, natural UI
Vocal consonant (recorded) Organic, formant-rich Character voice UI
Synth pulse (generated) Harmonically rich, controllable General use, flexible
FM tone (generated) Metallic, complex Retro arcade, 1980s
Noise burst (generated) Broadband, no pitch Glitch, error

The recorded sources have an advantage that the generated ones do not: they contain micro-variations from one hit to the next, and even a single recorded click contains enough internal complexity that different grains from it sound different. A granular blip that draws random grains from a recorded click will produce a series of blips that vary in a way a pure oscillator cannot.

The generated sources have an advantage in control. A synth pulse can be tuned to a specific pitch, and the grain drawn from it will carry that pitch. A noise burst can be filtered to a specific band, and the grain will carry that band. The synthesizer sound design guide covers the source creation for both categories.

The practical approach for a project that wants a granular blip set is to start with one source, generate the blips, and evaluate whether the character of that source is enough. A recorded metallic click can produce an entire UI set of blips by varying the grain position, the grain size, and the pitch. The source provides the identity; the granular parameters provide the variation.

How do you build a single-grain blip in code?

The implementation is a simplified version of the general granular engine, with the grain count reduced to one and the window function configured for a blip shape rather than a texture shape.

function playGranularBlip(sourceBuffer, {
    grainSize = 0.015,     // 15 ms grain
    position = 0.5,        // center of source
    pitchShift = 1.0,      // 1.0 = no pitch change
    volume = 0.6
} = {}) {
    const ctx = getAudioContext();
    const now = ctx.currentTime;

    const source = ctx.createBufferSource();
    const gain = ctx.createGain();

    source.buffer = sourceBuffer;
    source.playbackRate.value = pitchShift;

    // Calculate the read position within the source
    const bufferDuration = sourceBuffer.duration;
    const readOffset = Math.max(
        0,
        Math.min(
            bufferDuration * position - grainSize / 2,
            bufferDuration - grainSize
        )
    );

    // Hann window: linear approximation with fast attack
    // and exponential decay to match blip character
    gain.gain.setValueAtTime(0, now);
    gain.gain.linearRampToValueAtTime(volume, now + 0.001);
    gain.gain.exponentialRampToValueAtTime(0.001, now + grainSize);

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

    // Play only the grain fragment
    source.start(now, readOffset, grainSize);
    source.stop(now + grainSize + 0.005);
}

The key details are in the timing. The source.start(now, readOffset, grainSize) call plays a specific fragment of the buffer starting at readOffset and lasting grainSize seconds. The readOffset is calculated to center the grain at the requested position in the source, which allows the designer to pick which part of the source's internal evolution to capture.

The envelope is where the blip character comes from. The 1-millisecond attack and the exponential decay produce a blip-shaped envelope rather than a grain-shaped one. The exponential decay is important because it produces the natural falloff that makes the blip feel like an event rather than a truncated fragment.

The pitch shift is implemented through playbackRate, which affects both pitch and duration together. A pitchShift of 1.1 plays the grain 10 percent higher and 10 percent shorter. For a 15-millisecond grain, the shortening is 1.5 milliseconds, which is below the perceptual threshold for duration but above the threshold for pitch. The result is a blip that is pitched up without a noticeable change in length.

The Web Audio blip tutorial covers the general blip implementation. The granular version differs in the source: instead of a continuous oscillator, it is a fragment of a buffer, and the character of that fragment is what makes the blip distinctive.

How does the grain position change the sound?

The position parameter in the code above is the read offset within the source, expressed as a fraction of the source's total length. A position of 0.5 plays the grain from the middle of the source, while 0.2 plays it from the early part and 0.8 plays it from the late part.

The sound at different positions is different because the source evolves over its duration. A recorded metallic click has a sharp attack at the start, a ringing middle, and a decay at the end. A grain drawn from the start of the click captures the attack character. A grain from the middle captures the ring. A grain from the end captures the decay.

The specific positions that work for a blip:

  • Position 0.1 to 0.2 (early). Captures the attack transient of the source. The grain will be sharp and bright, with the character of the original impact.
  • Position 0.4 to 0.6 (middle). Captures the ringing portion. The grain will have harmonic content that the attack does not, because the source has settled into a stable pitch.
  • Position 0.7 to 0.9 (late). Captures the decay. The grain will be quieter and darker, with the character of the source's fade-out.

The choice depends on what the blip is supposed to communicate. A confirmation blip that wants to feel sharp and responsive should use position 0.1 to 0.2, so the grain captures the source's attack. A neutral feedback blip that wants to feel solid should use position 0.4 to 0.6, so the grain has the source's full harmonic content.

The position can also vary between playbacks, which is a way to introduce variation without any pitch or volume change. A blip that draws from position 0.4 on one playback and 0.6 on the next sounds slightly different even at the same pitch and volume, because the source content at those two positions is not identical. The variation system guide covers the perceptual thresholds that determine how much position variation is enough.

When is a granular blip actually worth the extra complexity?

A granular blip is more complex than an oscillator blip. It requires a source buffer, a grain extraction mechanism, and careful parameter tuning. The question is not whether it is possible, but whether it is worth the effort for a given project.

The cases where granular is worth it:

The blip needs to sound like a specific material. A UI that uses wood sounds, metal sounds, or organic sounds cannot be produced with an oscillator alone. The granular approach lets the material source provide the character, and the blip shape provide the envelope.

The blip needs to vary across playbacks in a way an oscillator cannot. A pure oscillator with pitch and volume variation produces variations that all sound like the same sound at different pitches. A granular blip drawn from different positions in the source produces variations that sound like different sounds from the same family.

The game's aesthetic is built around recorded sound rather than synthesized sound. A game with a realistic or organic aesthetic cannot use pure oscillator blips without the blips feeling out of place. The granular approach produces blips that fit the aesthetic, because they are derived from the same kind of source material as the rest of the game's audio.

The cases where granular is not worth it:

The blip needs to be tuned to a specific frequency. A granular blip's pitch is determined by the source material, and adjusting it requires either pitch-shifting the grain or choosing a different source. An oscillator blip is tunable by a single parameter, which is far simpler.

The blip plays hundreds of times per minute. A granular blip requires buffer reads and grain extraction, which costs more CPU than a simple oscillator. For a UI that plays a blip on every keystroke or every menu navigation, the oscillator approach is more efficient and produces a sound that is just as functional.

The project has no existing recorded source material. A granular blip requires a source, and the source has to come from somewhere. A project that has no recorded material to draw from would need to record or generate the source before it could produce the blip, which adds work without a clear benefit if the source is generated anyway.

The granular blip is a specific tool for a specific situation. It is not a general-purpose replacement for the oscillator blip, and most projects should not use it. A project that has material-specific UI sounds, an aesthetic built around recorded audio, and a need for variation that oscillators cannot provide is the project that benefits. A project that needs a simple confirmation blip for a menu is not.

What does a project's granular blip set actually look like?

A project that commits to granular blips usually starts with one source and derives the full set from it. The source is chosen for its character, and every blip in the set is a different grain of that source with a different envelope and a different position.

A recorded metallic click of about 200 milliseconds is a good starting source, because it has distinct phases (attack, ring, decay) that different grain positions can capture. From that single source, a set of six to eight blips can be produced by varying the position, size, and pitch.

Blip role Position Grain size Pitch
Cursor move 0.15 10 ms 1.15
Confirm 0.40 15 ms 1.00
Cancel 0.30 20 ms 0.90
Error 0.20 25 ms 0.80
Notification 0.50 18 ms 1.10
Toggle on 0.25 12 ms 1.05

The pitch values above are playbackRate multipliers, not frequencies. A pitch of 1.15 plays the grain 15 percent higher than the source, which for a metallic click centered around 1200 Hz produces a blip centered around 1380 Hz. The values are chosen so that the set spans the 900 to 1500 Hz range that works for most UI contexts.

The consistency across the set comes from the shared source. All six blips contain the same material, so they all sound like they belong to the same UI. The variation across the set comes from the position, size, and pitch, which are all parameters the designer controls independently.

The result is a UI sound set that sounds like it was designed around a specific material — in this case, a metallic click — rather than around a specific waveform. The character is more specific than an oscillator set, and more cohesive than a set assembled from multiple sources. The tradeoff is that changing the character requires changing the source, which means rebuilding the set rather than adjusting a parameter.

A project that commits to this approach is making a commitment to a specific sonic identity. The blip set is not a generic UI sound; it is a sound that belongs to this game and this material. The game UI sound design guide covers the broader structure of a UI sound set; the granular approach is a specific technique that fits when the game has a material-driven identity.

The granular blip is the answer to a specific question: how do you make a UI sound that sounds like the game's world rather than like a game's UI. The answer is to draw the blip from the same material the game's sounds are drawn from. The granular engine is the mechanism that makes this possible for sounds as short as a blip.

Generate a Source Click for Granular Blips

Open the SfxMaker blip generator and create a short metallic or wood click with a rich harmonic character and a short decay. Export it as a WAV file and use it as the source buffer for a granular blip engine. The source provides the material character; the granular parameters provide the blip shape and variation.

Open Blip Sound Generator →
Advertisement