How to Add Sound Effects and Music in Construct 3

Audio is half the experience in a game. A well-timed sound effect makes a jump feel responsive, a hit feel impactful, and a menu feel polished. Construct 3 uses the Web Audio API under the hood, which means you get low-latency playback and powerful features like spatial positioning, but you also inherit browser audio restrictions. This guide covers everything from importing your first sound to building a full music system with crossfades and spatial effects.

Importing Audio and Supported Formats

Construct 3 organizes audio into two folders in the Project Bar: Sounds for short effects (gunshots, footsteps, UI clicks) and Music for longer background tracks. The distinction matters because Construct 3 streams music files instead of loading them entirely into memory.

To import audio, right-click the Sounds or Music folder and choose Import sounds or Import music. You can import WAV, OGG, WebM, MP3, or M4A files. Construct 3 automatically re-encodes imported files to WebM Opus, which offers the best compression and quality for web games.

A few format guidelines:

• Use WebM Opus as your primary format. All modern browsers support it and it compresses well.

• Avoid MP3 for looping music. MP3 decoders add padding to the start and end of the file, causing an audible gap on every loop. WebM Opus loops cleanly.

• Keep sound effects short. A 16-bit WAV at 44.1 kHz is fine for source files, but let Construct 3 encode them to Opus for the exported game.

• Normalize your audio levels in an external editor like Audacity before importing. This saves you from balancing wildly different volumes at runtime.

Playing Sounds from Event Sheets

Once you have the Audio object added and sounds imported, playing audio is straightforward. In your event sheet, create a condition (like a collision, button press, or timer trigger) and add the action Audio → Play.

The key parameters are:

• Audio file: Select from your imported sounds or music

• Loop: Set to looping for background music, not looping for one-shot effects

• Volume (dB): 0 is full volume, -10 is quieter, -60 is effectively silent

• Tag: A string identifier you use to control this sound later (pause, stop, change volume)

Here is a typical event sheet pattern for playing a jump sound and background music:

Event: On start of layout

• Audio → Play "bgm_forest" looping at volume 0 dB, tag "music"

Event: Player → On jump

• Audio → Play "sfx_jump" not looping at volume -3 dB, tag "sfx"

Event: Player → On collision with Coin

• Audio → Play "sfx_coin" not looping at volume 0 dB, tag "sfx"

Volume Control and Audio Tags

Tags are the key to managing audio in Construct 3. Every sound you play can be assigned a tag, and you can then target all sounds with that tag for volume changes, pausing, or stopping.

A common pattern is to use two master tags: "music" and "sfx". Then your settings screen can control them independently:

// In a script block or script file
function setMusicVolume(percent) {
    // Convert 0-100 slider to dB scale
    // 0% = -60 dB (silent), 100% = 0 dB (full)
    const db = percent <= 0
        ? -60
        : 20 * Math.log10(percent / 100);
    runtime.objects.Audio.getFirstInstance()
        .setVolume("music", db);
}

function setSfxVolume(percent) {
    const db = percent <= 0
        ? -60
        : 20 * Math.log10(percent / 100);
    runtime.objects.Audio.getFirstInstance()
        .setVolume("sfx", db);
}

Save these volume settings to LocalStorage so players do not have to set them every session. Load the saved values on startup and apply them before any sounds play.

Music Crossfades and Transitions

When switching between music tracks (for example, moving from the overworld to a dungeon), an abrupt cut sounds jarring. Use a crossfade instead. The idea is to fade the current track to silence while simultaneously fading the new track from silence to full volume.

In event sheets, you can use the Tween behavior on a helper sprite or use a timer-based approach:

// Crossfade between two music tracks
async function crossfadeMusic(newTrack, durationMs) {
    const audio = runtime.objects.Audio.getFirstInstance();
    const steps = 20;
    const interval = durationMs / steps;

    // Start new track silently
    audio.play(newTrack, "music-new", true, -60);

    for (let i = 1; i <= steps; i++) {
        await new Promise(r => setTimeout(r, interval));
        const progress = i / steps;
        // Fade old track out
        audio.setVolume("music", -60 * progress);
        // Fade new track in
        audio.setVolume("music-new", -60 * (1 - progress));
    }

    // Stop old track, re-tag new track
    audio.stop("music");
    audio.setTag("music-new", "music");
}

Spatial Audio for 2D Games

Construct 3 supports positional audio through the Web Audio API’s panner nodes. This makes sounds louder when the source is near the listener (usually the player) and quieter when it is far away. Sounds can also pan left and right based on relative position.

To enable spatial audio in event sheets:

1. Set the listener position every tick to the player’s coordinates:

• Every tick: Audio → Set listener position to Player.X, Player.Y

2. When playing a positional sound, use the Play at position action instead of regular Play:

• Audio → Play "sfx_waterfall" at position Waterfall.X, Waterfall.Y, not looping, volume 0 dB, tag "ambient"

3. For looping ambient sounds that move (like an enemy), update the sound position every tick:

• Every tick + Audio is tag "enemy_engine" playing: Audio → Set sound position of tag "enemy_engine" to Enemy.X, Enemy.Y

Spatial audio parameters you can tweak include:

• Inner and outer cone angles: Useful for directional sounds like spotlights or speakers

• Reference and maximum distance: Control how quickly sound falls off with distance

• Rolloff factor: Set the attenuation curve steepness

Handling Mobile Autoplay Restrictions

Mobile browsers (and some desktop browsers) block audio playback until the user has interacted with the page. This is a Web Audio API policy, not a Construct 3 limitation. If you try to play sound on the start of layout without prior interaction, the audio context will be suspended and no sound plays.

The fix is simple: always gate your game behind a user interaction. The most common patterns are:

• Tap-to-start screen: Show a “Tap to Start” text on your first layout. On touch, go to the game layout. By the time gameplay starts, audio is unlocked.

• Title menu: If your game has a menu with a “Play” button, the tap on that button counts as user interaction and unlocks audio.

Construct 3’s Audio plugin automatically resumes the audio context on the first user gesture. You do not need to write any special code for this. Just make sure you do not rely on sounds playing before the user has tapped anything.

// You can also manually check and resume audio context
const audio = runtime.objects.Audio.getFirstInstance();

// Check if audio context is suspended
if (audio.audioContext.state === "suspended") {
    // This will be resolved on the next user gesture
    audio.audioContext.resume();
}

Related Issues

If your audio is not playing at all in the browser, see Fix Construct 3 Audio Not Playing in Browser. For mobile-specific first-touch issues, see Fix Construct 3 Audio Not Playing on First Touch. For general game audio debugging, read How to Catch Audio Bugs in Game Testing.

Normalize all your audio files before importing. Nothing breaks immersion faster than a coin pickup that is three times louder than the background music. Consistent source levels make runtime mixing much easier to manage.