Why does Construct 3 audio not play until the user clicks?

Modern browsers block AudioContext playback until a user gesture (click, tap, keypress) occurs. This is the browser autoplay policy, not a Construct 3 bug. Construct 3 creates its AudioContext on startup, but the browser suspends it until interaction. Audio queued before the gesture is lost or silent.

How do I handle browser autoplay policy in Construct 3?

Add a 'Click or tap to start' screen before your game begins. Use the 'On user input gesture' system condition or check 'Audio context state is running' before playing sounds. Construct 3's Audio plugin automatically resumes the context on first gesture, but sounds played before that gesture are lost.

Does preloading audio help with the autoplay restriction in Construct 3?

Preloading ensures audio files are downloaded and decoded, but it does not bypass the autoplay policy. The AudioContext must be resumed by a user gesture regardless of whether audio data is preloaded. Preloading helps with latency after the gesture, not with the initial silence.

Fix: Construct 3 Audio Not Playing Without User Gesture

Quick answer: Browser autoplay policy suspends the AudioContext until a user gesture (click, tap, or keypress). Add a “Click to Start” screen before playing audio, or use Construct 3’s “On user input gesture” condition to trigger your first audio playback. Sounds played before the gesture are silently dropped.

Here is how to fix Construct 3 audio not playing without user gesture. You add background music to your game’s first layout. You set it to play on Start of Layout. You preview in Chrome and hear nothing. You click anywhere on the game and suddenly the music starts. Every time you reload, the same silence until first click. This is not a Construct 3 bug — it is browser autoplay policy enforced by Chrome, Firefox, Safari, and Edge.

The Symptom

Audio actions (Play, Play at position, Play looping) execute without error but produce no sound. After the user clicks, taps, or presses a key anywhere in the game, audio suddenly works. All subsequent audio plays normally. Only the initial audio before first interaction is silent. The browser console may show: “The AudioContext was not allowed to start.”

What Causes This

Browser autoplay policy. Since 2018, all major browsers require a user gesture before allowing audio playback. The Web Audio API’s AudioContext starts in a “suspended” state. Any audio routed through it is silently discarded until AudioContext.resume() is called from within a user gesture event handler.

Construct 3 creates AudioContext at startup. When the runtime initializes, it creates an AudioContext for the Audio plugin. The browser immediately suspends it. Construct 3 automatically resumes it on the first detected user interaction, but any Play actions before that interaction are lost.

Play on Start of Layout fires before gesture. If your first layout’s event sheet plays audio in “On start of layout”, this fires during page load — before any user interaction. The audio command is sent to a suspended context and silently fails.

Exported games have the same restriction. This applies to web exports, mobile browser wraps, and any platform using a browser engine (Electron, NW.js, WebView). Native desktop exports via Construct’s wrapper may not have this restriction.

The Fix

Step 1: Add a title/start screen requiring interaction.

// Event Sheet: TitleScreen
// Condition: On start of layout
// Action: (no audio here - just show "Click to Start" text)

// Condition: Touch > On any touch start
//   -OR- Mouse > On any click
//   -OR- Keyboard > On any key pressed
// Action: System > Go to layout "Game"

The first layout shows a title screen with “Click to Start” or “Tap to Play”. The user gesture on this screen resumes the AudioContext. By the time the game layout loads, audio works normally.

Step 2: Use “On user input gesture” condition.

// Construct 3 has a built-in condition for this:
// Condition: System > On user input gesture
// Action: Audio > Play "BackgroundMusic" looping

// This fires exactly once, on the first user interaction
// Audio played here is guaranteed to work

The “On user input gesture” system condition fires on the first qualifying user interaction (click, tap, or key). Use it to start your background music reliably.

Step 3: Check audio context state before playing.

// For more control, check the state:
// Condition: Audio > Audio context state is "running"
// Action: Audio > Play "Music" looping at volume -5 dB

// If state is "suspended", queue the audio for later:
// Set a variable: should_play_music = true
// Then in "On user input gesture":
//   If should_play_music: Play "Music"

Checking context state lets you handle the case gracefully without losing track of what should be playing.

Step 4: Preload audio for instant playback after gesture.

// On start of layout (before gesture):
// Action: Audio > Preload "BackgroundMusic"
// Action: Audio > Preload "JumpSFX"
// Action: Audio > Preload "CoinPickup"

// Preloading downloads and decodes the audio data
// It does NOT play it (no gesture needed for preload)
// When gesture arrives, playback starts instantly

Preloading is allowed without a gesture. It ensures audio data is ready in memory so that when the AudioContext resumes, playback begins with zero latency.

Mobile-Specific Considerations

On iOS Safari, the autoplay policy is stricter. The gesture must be a direct touch event (not a simulated click). Ensure your start screen responds to touch events, not just mouse events. Construct 3’s Touch plugin handles this correctly, but custom HTML overlays may not forward touches properly.

// For iOS compatibility, always include Touch condition:
// Condition: Touch > On any touch start
//   OR Mouse > On click
// (Touch fires first on mobile, Mouse fires on desktop)

What About Electron/NW.js Exports

Desktop wrapper exports (Electron, NW.js) can disable autoplay policy via flags. Construct 3’s built-in NW.js export often handles this automatically. If you still experience the issue in a wrapped build, check the wrapper’s chromium flags for --autoplay-policy=no-user-gesture-required.

“Autoplay policy is a browser rule, not a Construct 3 limitation. Every web game engine faces it. A start screen is the universal solution — and good UX anyway.”

Related Issues

For general audio loading patterns, preload all critical audio in your loading screen layout. For mobile-specific touch issues, ensure the Touch plugin is included in your project even if you primarily target desktop.

Start screen with click, preload audio early, play after gesture. Browser policy is non-negotiable.