Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/OmarMtya/engine.js/llms.txt

Use this file to discover all available pages before exploring further.

Engine.js supports two layers of audio: per-object sound effects tied to individual figures and driven by game events, and a global background track that plays continuously while the scene is running. Both use the browser’s native Audio API under the hood, so no external libraries are required.

Per-object sounds with Sonido

A Sonido component is attached to a figure’s transform and defines which audio clip to play and under what condition. Create one with new $g.Sonido({ src, activacion }) and assign it to figura.transform.sonido.

Constructor parameters

src
Audio
An HTMLAudioElement (new Audio()) with its src property set to the URL of the audio file. Use URL.createObjectURL(file) to load from a user-selected file, or pass a plain URL string.
activacion
string
The event that triggers playback. One of three values:
  • 'inicial' — the sound plays once as soon as the scene starts (when Play is pressed).
  • 'colision' — the sound plays each time this figure begins overlapping another rigid body.
  • 'colisionInversa' — the sound plays each time this figure stops overlapping another rigid body.

Attaching a sound to a figure

let audio = new Audio();
audio.src = "path/to/sound.mp3";

let sonido = new $g.Sonido({
    src: audio,
    activacion: 'colision'
});

figura.transform.sonido = sonido;

Activation modes explained

activacion valueWhen it fires
'inicial'Once on scene start (Play pressed)
'colision'Every time the figure starts overlapping a rigid body
'colisionInversa'Every time the figure stops overlapping a rigid body
Sounds using activacion: 'colision' or activacion: 'colisionInversa' require the figure to have rigido set. Without a Rigido component, collision events are never generated and the sound will never play. The 'inicial' activation mode does not require a rigid body.

Changing activation type at runtime

You can switch the activation mode on an existing sound at any time by updating the activacion property directly:
figura.transform.sonido.activacion = 'colisionInversa';

Removing a sound

Set figura.transform.sonido to null to detach the sound from the figure entirely:
figura.transform.sonido = null;

Global background audio

In addition to per-object sounds, you can load a single background track that plays automatically whenever the scene is running and pauses when the scene is paused. In the editor this is controlled by the volume icon in the toolbar. In code, hold a reference to an Audio object and play or pause it in sync with $g.Animar() and $g.DetenerAnimacion():
let bgAudio = new Audio();
bgAudio.src = URL.createObjectURL(file); // or a plain URL

// Play when animation starts
bgAudio.play();

// Pause when animation stops
bgAudio.pause();
The engine editor manages this automatically when a global track is loaded via the UI — pressing Play calls bgAudio.play() and pressing Pause calls bgAudio.pause().
The global background track is a single Audio object stored separately from the scene figures. It does not belong to any Figura and is not affected by Rigido or collision events.

Sound reference

ConceptAPINotes
Per-object soundfigura.transform.sonido = new $g.Sonido({ src, activacion })Tied to a specific figure
Activation — scene startactivacion: 'inicial'No rigido required
Activation — collision beginactivacion: 'colision'Requires rigido
Activation — collision endactivacion: 'colisionInversa'Requires rigido
Remove a soundfigura.transform.sonido = nullDetaches cleanly
Global backgroundbgAudio.play() / bgAudio.pause()Independent of figures

Build docs developers (and LLMs) love