@needle-tools/engine 5.1.0-canary.c111c4f → 5.1.0-canary.cce79c8

package/plugins/vite/dependency-watcher.js

@@ -98,7 +98,7 @@ function watchPackageJson(server, projectDir, packageJsonPath, cachePath) {
 
     setTimeout(() => {
         requireInstall = testIfInstallIsRequired(projectDir, packageJson);
-    }, 1000);
+    }, 1000).unref();
 
     setInterval(() => {
         if (!packageJson || lastEditTime === undefined) return;
@@ -149,7 +149,7 @@ function watchPackageJson(server, projectDir, packageJsonPath, cachePath) {
                 restart(server, projectDir, cachePath);
             }
         }
-    }, 2000);
+    }, 2000).unref();
 }
 
 /** @param {string} projectDir @param {PackageJson | undefined} packageJson @returns {boolean} */

package/plugins/vite/dts-generator.d.ts

@@ -2,6 +2,6 @@
  * @param {"build" | "serve"} _command  Vite command (unused — runs in both modes)
  * @param {import('../types/needleConfig').needleMeta | null | undefined} _config
  * @param {import('../types').userSettings} [_userSettings]
- * @returns {import('vite').Plugin}
+ * @returns {import('vite').Plugin | null}
  */
-export function needleDtsGenerator(_command: "build" | "serve", _config: import("../types/needleConfig").needleMeta | null | undefined, _userSettings?: import("../types").userSettings): import("vite").Plugin;
+export function needleDtsGenerator(_command: "build" | "serve", _config: import("../types/needleConfig").needleMeta | null | undefined, _userSettings?: import("../types").userSettings): import("vite").Plugin | null;

package/plugins/vite/dts-generator.js

@@ -72,9 +72,14 @@ function ensureVscodeHtmlCustomData(projectRoot, htmlDataPath) {
  * @param {"build" | "serve"} _command  Vite command (unused — runs in both modes)
  * @param {import('../types/needleConfig').needleMeta | null | undefined} _config
  * @param {import('../types').userSettings} [_userSettings]
- * @returns {import('vite').Plugin}
+ * @returns {import('vite').Plugin | null}
  */
 export function needleDtsGenerator(_command, _config, _userSettings) {
+
+    if(_userSettings?.dts?.enabled === false) {
+        return null;
+    }
+
     let projectRoot = process.cwd();
 
     function resolveCodegenDir() {

package/plugins/vite/editor-connection.js

@@ -27,7 +27,7 @@ export async function editorConnection(command, config, userSettings, pluginsArr
     if (typeof config.generator === "string" && !config.generator.includes("Unity")) return;
 
     if (!config) {
-        setTimeout(() => needleLog("needle-editor-sync", "Needle Editor Sync can not be installed automatically to vite: missing config", "warn"), 1000);
+        setTimeout(() => needleLog("needle-editor-sync", "Needle Editor Sync can not be installed automatically to vite: missing config", "warn"), 1000).unref();
         return createPlugin(false);
     }
 
@@ -42,14 +42,14 @@ export async function editorConnection(command, config, userSettings, pluginsArr
     //     }
     // }
     if (needleEditorSettings && needleEditorSettings.enabled === false) {
-        setTimeout(() => needleLog("needle-editor-sync", "Needle Editor Sync is not enabled. Add a 'Needle Editor Sync' component to your scene to enable", "warn"), 1000);
+        setTimeout(() => needleLog("needle-editor-sync", "Needle Editor Sync is not enabled. Add a 'Needle Editor Sync' component to your scene to enable", "warn"), 1000).unref();
         return createPlugin(false);
     }
 
     // Check if the editor package is installed
     let path = root + `/node_modules/${editorSyncPackageName}/plugins/index.js`;
     if (existsSync(path) === false) {
-        setTimeout(() => needleLog("needle-editor-sync", `${editorSyncPackageName} is not installed: Add the "Needle Editor Sync" component to your scene if you want to send changes directly from the Unity Editor to web app`, "warn"), 1000);
+        setTimeout(() => needleLog("needle-editor-sync", `${editorSyncPackageName} is not installed: Add the "Needle Editor Sync" component to your scene if you want to send changes directly from the Unity Editor to web app`, "warn"), 1000).unref();
         return createPlugin(false);
     }
 

package/plugins/vite/local-files-core.js

@@ -291,7 +291,7 @@ export function needleMakeFilesLocal(command, _config, userSettings) {
                     failedDownloads,
                     localizationStats,
                 }, activeHandlers);
-                src = fixRelativeNewURL(src);
+                src = fixRelativeNewURL(src, viteConfig?.base);
             }
             catch (err) {
                 needleLog("needle:local-files", "Error in transform: " + getErrMessage(err), "error");
@@ -303,7 +303,7 @@ export function needleMakeFilesLocal(command, _config, userSettings) {
         },
         renderChunk(code, chunk) {
             if (!chunk.fileName?.endsWith(".js")) return null;
-            const fixed = fixRelativeNewURL(code);
+            const fixed = fixRelativeNewURL(code, viteConfig?.base);
             if (fixed === code) return null;
             return {
                 code: fixed,
@@ -314,7 +314,7 @@ export function needleMakeFilesLocal(command, _config, userSettings) {
             for (const output of Object.values(bundle)) {
                 if (output.type !== "chunk") continue;
                 if (!output.fileName?.endsWith(".js")) continue;
-                const fixed = fixRelativeNewURL(output.code);
+                const fixed = fixRelativeNewURL(output.code, viteConfig?.base);
                 if (fixed !== output.code) output.code = fixed;
             }
         },

package/plugins/vite/local-files-utils.d.ts

@@ -24,9 +24,11 @@ export function normalizeWebPath(path: string): string;
 export function ensureTrailingSlash(path: string): string;
 /**
  * @param {string} src
+ * @param {string} [base] - Vite base path (e.g. "/" or "/app/"). When provided,
+ *   ext/ paths are made absolute so they resolve correctly under SPA routing.
  * @returns {string}
  */
-export function fixRelativeNewURL(src: string): string;
+export function fixRelativeNewURL(src: string, base?: string): string;
 /**
  * @param {string} src
  * @returns {string}

package/plugins/vite/local-files-utils.js

@@ -113,25 +113,49 @@ export function ensureTrailingSlash(path) {
 
 /**
  * @param {string} src
+ * @param {string} [base] - Vite base path (e.g. "/" or "/app/"). When provided,
+ *   ext/ paths are made absolute so they resolve correctly under SPA routing.
  * @returns {string}
  */
-export function fixRelativeNewURL(src) {
+export function fixRelativeNewURL(src, base) {
+    /** @param {string} path */
+    function makeAbsolute(path) {
+        // Strip any leading ./ ../ or / prefix to get the clean ext/... path
+        const clean = path.replace(/^(?:\.\.?\/)+/, '').replace(/^\//, '');
+        if (base) return base.replace(/\/+$/, '') + '/' + clean;
+        return clean;
+    }
+
     src = src.replace(
         /(?<==\s*)(["'])((?:(?:\.{1,2}\/)|\/)?ext\/[^"']*\/)\1/g,
         (/** @type {string} */ _match, /** @type {string} */ quote, /** @type {string} */ path) => {
-            const runtimePath = path.startsWith("/ext/") ? path.substring(1) : path;
-            return `new URL(${quote}${runtimePath}${quote}, self.location?.href || ${quote}${quote}).href`;
+            const resolved = makeAbsolute(path);
+            return `new URL(${quote}${resolved}${quote}, self.location?.href || ${quote}${quote}).href`;
         }
     );
 
     src = src.replace(
         /new\s+URL\s*\(\s*(["'`])((?:(?:\.{1,2}\/)|\/)?ext\/[^"'`]+)\1\s*\)/g,
         (/** @type {string} */ _match, /** @type {string} */ quote, /** @type {string} */ path) => {
-            const runtimePath = path.startsWith("/ext/") ? path.substring(1) : path;
-            return `new URL(${quote}${runtimePath}${quote}, self.location?.href)`;
+            const resolved = makeAbsolute(path);
+            return `new URL(${quote}${resolved}${quote}, self.location?.href)`;
         }
     );
 
+    // Make remaining ext/ string literals absolute (e.g. font paths passed as
+    // function arguments like addVariant("normal","normal","ext/fonts/...")).
+    // The regexes above already consumed paths inside new URL() calls and
+    // assignment-based patterns, so this only catches leftover bare strings.
+    if (base) {
+        src = src.replace(
+            /(["'`])((?:\.{1,2}\/)?ext\/[^"'`]+)\1/g,
+            (/** @type {string} */ _match, /** @type {string} */ quote, /** @type {string} */ path) => {
+                const resolved = makeAbsolute(path);
+                return `${quote}${resolved}${quote}`;
+            }
+        );
+    }
+
     return src;
 }
 

package/plugins/vite/reload.js

@@ -7,6 +7,7 @@ import { existsSync, readFileSync, statSync } from 'fs';
 import { fileURLToPath } from 'url';
 import { needleLog } from './logging.js';
 
+const pluginName = "needle-reload";
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
@@ -39,7 +40,7 @@ export function needleReload(_command, config, userSettings) {
     const buildDirectory = projectConfig?.buildDirectory?.length ? process.cwd().replaceAll("\\", "/") + "/" + projectConfig?.buildDirectory : "";
     if (buildDirectory?.length) {
         const relativeBuildDirectory = path.relative(process.cwd(), buildDirectory).replaceAll("\\", "/") || ".";
-        setTimeout(() => needleLog("needle-reload", "Build directory: " + relativeBuildDirectory), 100);
+        setTimeout(() => needleLog(pluginName, "Build directory: " + relativeBuildDirectory), 100);
     }
 
     // These ignore patterns will be injected into user config to better control vite reloading
@@ -59,7 +60,7 @@ export function needleReload(_command, config, userSettings) {
                 // @ts-ignore - watch.ignored is guaranteed to be string[] by the guards above
                 config.server.watch.ignored.push(pattern);
             if (userSettings?.debug === true)
-                setTimeout(() => needleLog("needle-reload", "Updated server ignore patterns: " + JSON.stringify(config.server?.watch?.ignored)), 100);
+                setTimeout(() => needleLog(pluginName, "Updated server ignore patterns: " + JSON.stringify(config.server?.watch?.ignored)), 100);
         },
         /** @param {import('vite').HmrContext & {buildDirectory?: string}} args */
         handleHotUpdate(args) {
@@ -118,7 +119,7 @@ function getHot(server) {
 
 /** @param {import('vite').ViteDevServer} server @param {string} [file] */
 function notifyClientWillReload(server, file) {
-    console.log("Send reload notification");
+    needleLog(pluginName, "Send reload notification");
     getHot(server).send('needle:reload', { type: 'will-reload', file: file });
 }
 
@@ -134,7 +135,7 @@ async function handleReload({ file, server, modules: _modules, read, buildDirect
 
     // Dont reload the whole server when a file that is using hot reload changes
     if (filesUsingHotReload.has(file)) {
-        console.log("File is using hot reload: " + file);
+        needleLog(pluginName, "File is using hot reload: " + file);
         return null;
     }
 
@@ -153,7 +154,7 @@ async function handleReload({ file, server, modules: _modules, read, buildDirect
     // instead of relying on the vite server watch ignore array
     // we could here also match paths that we know we dont want to track
     if (ignorePatterns.length > 0 && ignoreRegex.test(file)) {
-        console.log("Ignore change in file: " + getFileNameLog(file));
+        needleLog(pluginName, "Ignore change in file: " + getFileNameLog(file));
         return [];
     }
 
@@ -163,7 +164,7 @@ async function handleReload({ file, server, modules: _modules, read, buildDirect
     if (buildDirectory?.length) {
         const dir = path.dirname(file).replaceAll("\\", "/");
         if (dir.startsWith(buildDirectory)) {
-            console.log("Ignore change in build directory: " + getFileNameLog(file));
+            needleLog(pluginName, "Ignore change in build directory: " + getFileNameLog(file));
             return [];
         }
     }
@@ -178,13 +179,13 @@ async function handleReload({ file, server, modules: _modules, read, buildDirect
             return [];
         }
         if (await testIfFileContentChanged(file, read) === false) {
-            console.log("File content didnt change: " + getFileNameLog(file));
+            needleLog(pluginName, "File content didnt change: " + getFileNameLog(file));
             return [];
         }
     }
 
     // these are known file types we export from integrations
-    const knownExportFileTypes = [ ".glb", ".gltf", ".bin", "exr", ".ktx2", ".mp3", ".ogg", ".mp4", ".webm" ];
+    const knownExportFileTypes = [".glb", ".gltf", ".bin", "exr", ".ktx2", ".mp3", ".ogg", ".mp4", ".webm"];
     if (!knownExportFileTypes.some((type) => file.endsWith(type)))
         return null;
 
@@ -208,7 +209,7 @@ async function handleReload({ file, server, modules: _modules, read, buildDirect
         }
     }
 
-    console.log("> Detected file change: ", getFileNameLog(file) + " (" + ((fileSize / (1024 * 1024)).toFixed(1)) + " MB)");
+    needleLog(pluginName, "> Detected file change: " + getFileNameLog(file) + " (" + ((fileSize / (1024 * 1024)).toFixed(1)) + " MB)");
     notifyClientWillReload(server);
     scheduleReload(server);
     return [];
@@ -223,8 +224,8 @@ async function scheduleReload(server, level = 0) {
     const lockFile = path.join(process.cwd(), lockFileName);
     if (existsSync(lockFile)) {
         if (level === 0)
-            console.log("Lock file exists, waiting for export to finish...");
-        setTimeout(() => scheduleReload(server, level += 1), 300);
+            needleLog(pluginName, "Lock file exists, waiting for export to finish...");
+        setTimeout(() => scheduleReload(server, level += 1), 300).unref();
         return;
     }
 
@@ -234,13 +235,13 @@ async function scheduleReload(server, level = 0) {
     if (timeDiff < 1000) {
         // Sometimes file changes happen immediately after triggering a reload 
         // we dont want to reload again in that case
-        console.log("Ignoring reload, last reload was too recent", timeDiff);
+        needleLog(pluginName, "Ignoring reload, last reload was too recent" + timeDiff + "ms ago");
         return;
     }
 
     lastReloadTime = Date.now();
     const readableTime = new Date(lastReloadTime).toLocaleTimeString();
-    console.log("< Reloading... " + readableTime)
+    needleLog(pluginName, "< Reloading... " + readableTime);
     getHot(server).send({
         type: 'full-reload',
         path: '*'
@@ -299,10 +300,10 @@ function removeVersionQueryArgument(content) {
 function insertScriptRegisterHotReloadCode(src, filePath) {
 
     // We only want to inject the hot reload code in the needle-engine root file
-    if(!filePath.includes("/src/needle-engine.ts")) {
+    if (!filePath.includes("/src/needle-engine.ts")) {
         return src;
     }
-    console.log("[Needle HMR] Hot reload is enabled");
+    needleLog(pluginName, "[Needle HMR] Hot reload is enabled");
     // this code let's the engine know that we are in hot reload mode
     const code = `
 globalThis.NEEDLE_HOT_RELOAD_ENABLED = true;
@@ -338,12 +339,12 @@ function insertScriptHotReloadCode(src, filePath) {
             return undefined;
         // make import path from engine package
         const fullPathToHotReload = process.cwd() + "/node_modules/@needle-tools/engine/src/engine/engine_hot_reload.ts";
-        // console.log(fullPathToHotReload);
+        // needleLog(pluginName, fullPathToHotReload);
         const fileDirectory = path.dirname(filePath);
-        // console.log("DIR", fileDirectory)
+        // needleLog(pluginName, "DIR", fileDirectory)
         const relativePath = path.relative(fileDirectory, fullPathToHotReload);
         importPath = relativePath.replace(/\\/g, "/");
-        // console.log("importPath: ", importPath);
+        // needleLog(pluginName, "importPath: ", importPath);
     }
 
     // console.log(importPath, ">", filePath);

package/plugins/vite/server.js

@@ -60,7 +60,8 @@ export function needleServer(command, config, userSettings) {
                             })
                             .catch((err) => console.error("ERR: [needle:server] 'open' package not found - please make sure to install 'open' in your package.json\n", err));
                     }
-                }, 100)
+                }, 100);
+                i.unref();
             }
         },
     }

package/src/engine/api.ts

@@ -114,6 +114,9 @@ export * from "./engine_addressables.js";
 /** Animation playback and control utilities */
 export { AnimationUtils } from "./engine_animation.js";
 
+/** Standalone audio clip for playback control */
+export { AudioClip } from "./engine_audio.js";
+
 /** Application-level state and utilities */
 export { Application } from "./engine_application.js";
 
@@ -173,6 +176,10 @@ export * from "./engine_context_registry.js";
  */
 export * from "./engine_coroutine.js"
 
+/** DisposableStore for managing lifecycle-bound cleanup in components */
+export { DisposableStore, on, isDisposable } from "./engine_disposable.js";
+export type { DisposeFn, IDisposable } from "./engine_disposable.js";
+
 /** Factory functions for creating primitives and objects */
 export * from "./engine_create_objects.js";
 

package/src/engine/codegen/register_types.ts

@@ -7,11 +7,6 @@ import { Animation } from "../../engine-components/Animation.js";
 import { Animator } from "../../engine-components/Animator.js";
 import { AudioListener } from "../../engine-components/AudioListener.js";
 import { AudioSource } from "../../engine-components/AudioSource.js";
-import { Avatar_Brain_LookAt } from "../../engine-components/avatar/Avatar_Brain_LookAt.js";
-import { Avatar_MouthShapes } from "../../engine-components/avatar/Avatar_MouthShapes.js";
-import { Avatar_MustacheShake } from "../../engine-components/avatar/Avatar_MustacheShake.js";
-import { AvatarBlink_Simple } from "../../engine-components/avatar/AvatarBlink_Simple.js";
-import { AvatarEyeLook_Rotation } from "../../engine-components/avatar/AvatarEyeLook_Rotation.js";
 import { AxesHelper } from "../../engine-components/AxesHelper.js";
 import { BasicIKConstraint } from "../../engine-components/BasicIKConstraint.js";
 import { BoxHelperComponent } from "../../engine-components/BoxHelperComponent.js";
@@ -110,6 +105,7 @@ import { AnimationTrackHandler } from "../../engine-components/timeline/Timeline
 import { AudioTrackHandler } from "../../engine-components/timeline/TimelineTracks.js";
 import { MarkerTrackHandler } from "../../engine-components/timeline/TimelineTracks.js";
 import { SignalTrackHandler } from "../../engine-components/timeline/TimelineTracks.js";
+import { ActivationTrackHandler } from "../../engine-components/timeline/TimelineTracks.js";
 import { ControlTrackHandler } from "../../engine-components/timeline/TimelineTracks.js";
 import { TransformGizmo } from "../../engine-components/TransformGizmo.js";
 import { BaseUIComponent } from "../../engine-components/ui/BaseUIComponent.js";
@@ -167,11 +163,6 @@ export function initBuiltinTypes() {
 	TypeStore.add("Animator", Animator);
 	TypeStore.add("AudioListener", AudioListener);
 	TypeStore.add("AudioSource", AudioSource);
-	TypeStore.add("Avatar_Brain_LookAt", Avatar_Brain_LookAt);
-	TypeStore.add("Avatar_MouthShapes", Avatar_MouthShapes);
-	TypeStore.add("Avatar_MustacheShake", Avatar_MustacheShake);
-	TypeStore.add("AvatarBlink_Simple", AvatarBlink_Simple);
-	TypeStore.add("AvatarEyeLook_Rotation", AvatarEyeLook_Rotation);
 	TypeStore.add("AxesHelper", AxesHelper);
 	TypeStore.add("BasicIKConstraint", BasicIKConstraint);
 	TypeStore.add("BoxHelperComponent", BoxHelperComponent);
@@ -270,6 +261,7 @@ export function initBuiltinTypes() {
 	TypeStore.add("AudioTrackHandler", AudioTrackHandler);
 	TypeStore.add("MarkerTrackHandler", MarkerTrackHandler);
 	TypeStore.add("SignalTrackHandler", SignalTrackHandler);
+	TypeStore.add("ActivationTrackHandler", ActivationTrackHandler);
 	TypeStore.add("ControlTrackHandler", ControlTrackHandler);
 	TypeStore.add("TransformGizmo", TransformGizmo);
 	TypeStore.add("BaseUIComponent", BaseUIComponent);

package/src/engine/debug/debug_spatial_console.ts

@@ -12,13 +12,16 @@ import { onError } from "./debug_overlay.js";
 
 let _isActive = false;
 
-// enable the spatial console if we receive an error while in dev session and in XR
-onError((...args: any[]) => {
-    if (isDevEnvironment() && ContextRegistry.Current?.isInXR) {
-        enableSpatialConsole(true);
-        onLog("error", ...args);
-    }
-})
+/** @internal */
+export function initSpatialConsole() {
+    // enable the spatial console if we receive an error while in dev session and in XR
+    onError((...args: any[]) => {
+        if (isDevEnvironment() && ContextRegistry.Current?.isInXR) {
+            enableSpatialConsole(true);
+            onLog("error", ...args);
+        }
+    });
+}
 
 
 /** Enable a spatial debug console that follows the camera */

package/src/engine/engine_addressables.ts

@@ -567,7 +567,6 @@ class AddressableSerializer extends TypeSerializer {
     }
 
 }
-new AddressableSerializer();
 
 
 
@@ -703,7 +702,6 @@ export class ImageReferenceSerializer extends TypeSerializer {
         return undefined;
     }
 }
-new ImageReferenceSerializer();
 
 
 
@@ -772,4 +770,9 @@ export class FileReferenceSerializer extends TypeSerializer {
         return undefined;
     }
 }
-new FileReferenceSerializer();
+/** @internal */
+export function initAddressableSerializers() {
+    new AddressableSerializer();
+    new ImageReferenceSerializer();
+    new FileReferenceSerializer();
+}

package/src/engine/engine_audio.ts

@@ -21,4 +21,188 @@ export function ensureAudioContextIsResumed() {
             }, 500);
         });
     });
+}
+
+
+/**
+ * Represents an audio clip that can be loaded and played independently.
+ * The AudioClip class encapsulates the URL of the audio resource and provides
+ * methods for playback control (play, pause, stop) and querying duration.
+ */
+export class AudioClip {
+
+    /**
+     * Creates a new AudioClip instance with the specified URL.
+     * @param url The URL of the audio resource to load. This can be a path to an audio file or a MediaStream URL.
+     */
+    constructor(public readonly url: string) {
+    }
+
+    /** Whether the clip is currently playing.
+     * @returns `true` if the clip is actively playing audio.
+     */
+    get isPlaying(): boolean {
+        return this._audioElement !== undefined
+            && !this._audioElement.paused
+            && !this._audioElement.ended;
+    }
+
+    /**
+     * The total duration of the audio clip in seconds.
+     * Loads the audio metadata if not already available.
+     * @returns A promise that resolves with the duration in seconds.
+     */
+    getDuration(): Promise<number> {
+        if (this._duration !== undefined) {
+            return Promise.resolve(this._duration);
+        }
+        return this.ensureAudioElement().then(audio => {
+            this._duration = audio.duration;
+            return audio.duration;
+        });
+    }
+
+    /**
+     * Plays the audio clip from the current position.
+     * @returns A promise that resolves when playback finishes, or rejects on error.
+     * If the clip is looping, the promise will never resolve on its own – call {@link stop} or {@link pause} to end playback.
+     */
+    // #region Play
+    play(): Promise<void> {
+        return this.ensureAudioElement().then(audio => {
+            return new Promise<void>((resolve, reject) => {
+                const onEnded = () => {
+                    cleanup();
+                    resolve();
+                };
+                const onError = () => {
+                    cleanup();
+                    reject(new Error(`Playback error for ${this.url}`));
+                };
+                const onPause = () => {
+                    // pause/stop also resolve the promise
+                    cleanup();
+                    resolve();
+                };
+                const cleanup = () => {
+                    audio.removeEventListener("ended", onEnded);
+                    audio.removeEventListener("error", onError);
+                    audio.removeEventListener("pause", onPause);
+                };
+                audio.addEventListener("ended", onEnded);
+                audio.addEventListener("error", onError);
+                audio.addEventListener("pause", onPause);
+                audio.play().catch(err => {
+                    cleanup();
+                    reject(err);
+                });
+            });
+        });
+    }
+
+    /**
+     * Pauses playback at the current position.
+     * Call {@link play} to resume.
+     */
+    // #region Pause/Stop
+    pause(): void {
+        this._audioElement?.pause();
+    }
+
+    /**
+     * Stops playback and resets the position to the beginning.
+     */
+    stop(): void {
+        if (this._audioElement) {
+            this._audioElement.pause();
+            this._audioElement.currentTime = 0;
+        }
+    }
+
+    /** Whether the clip should loop when reaching the end. */
+    get loop(): boolean { return this._loop; }
+    set loop(value: boolean) {
+        this._loop = value;
+        if (this._audioElement) this._audioElement.loop = value;
+    }
+
+    /** Playback volume from 0 (silent) to 1 (full). */
+    get volume(): number { return this._volume; }
+    set volume(value: number) {
+        this._volume = value;
+        if (this._audioElement) this._audioElement.volume = value;
+    }
+
+    /** Current playback position in seconds. */
+    get currentTime(): number { return this._audioElement?.currentTime ?? 0; }
+    set currentTime(value: number) {
+        if (this._audioElement) this._audioElement.currentTime = value;
+    }
+
+    /** Normalized playback progress from 0 to 1.
+     * @returns The current playback position as a value between 0 and 1, or 0 if the duration is unknown.
+     */
+    get progress(): number {
+        if (!this._audioElement || !this._duration) return 0;
+        return this._audioElement.currentTime / this._duration;
+    }
+
+    /**
+     * Seeks to a normalized position (0–1) in the clip.
+     * @param position A value between 0 (start) and 1 (end).
+     */
+    // #region Seek
+    seek(position: number): void {
+        if (this._audioElement && this._duration) {
+            this._audioElement.currentTime = Math.max(0, Math.min(1, position)) * this._duration;
+        }
+    }
+
+    /** The underlying HTMLAudioElement, or `undefined` if not yet created.
+     * Use this to connect the element to the Web Audio API via `createMediaElementSource()`.
+     * @returns The HTMLAudioElement if the clip has been loaded or played, otherwise `undefined`.
+     */
+    get audioElement(): HTMLAudioElement | undefined { return this._audioElement; }
+
+    private _audioElement?: HTMLAudioElement;
+    private _duration?: number;
+    private _loadPromise?: Promise<HTMLAudioElement>;
+    private _loop: boolean = false;
+    private _volume: number = 1;
+
+    /** Lazily creates and loads the shared HTMLAudioElement. */
+    private ensureAudioElement(): Promise<HTMLAudioElement> {
+        if (this._audioElement && this._loadPromise) {
+            return this._loadPromise;
+        }
+        const audio = this._audioElement ?? new Audio(this.url);
+        this._audioElement = audio;
+        audio.loop = this._loop;
+        audio.volume = this._volume;
+
+        if (audio.readyState >= HTMLMediaElement.HAVE_METADATA) {
+            this._duration = audio.duration;
+            this._loadPromise = Promise.resolve(audio);
+            return this._loadPromise;
+        }
+
+        this._loadPromise = new Promise<HTMLAudioElement>((resolve, reject) => {
+            const onLoaded = () => {
+                cleanup();
+                this._duration = audio.duration;
+                resolve(audio);
+            };
+            const onError = (e: Event) => {
+                cleanup();
+                reject(new Error(`Failed to load audio clip from ${this.url}: ${e}`));
+            };
+            const cleanup = () => {
+                audio.removeEventListener("loadedmetadata", onLoaded);
+                audio.removeEventListener("error", onError);
+            };
+            audio.addEventListener("loadedmetadata", onLoaded);
+            audio.addEventListener("error", onError);
+        });
+        return this._loadPromise;
+    }
 }

package/src/engine/engine_components.ts

@@ -8,9 +8,9 @@ import { InstantiateIdProvider } from "./engine_networking_instantiate.js";
 import { Context, registerComponent } from "./engine_setup.js";
 import type { ComponentInit, Constructor, ConstructorConcrete, IComponent, IGameObject } from "./engine_types.js";
 import { $componentName } from "./engine_types.js";
+import { TypeStore } from "./engine_typestore.js";
 import { getParam } from "./engine_utils.js";
 import { apply } from "./js-extensions/index.js";
-import { TypeStore } from "./engine_typestore.js";
 
 const COMPONENT_GUID_NAMESPACE = 'eff8ba80-635d-11ec-90d6-0242ac120003';