feat(audio): audio system

app/components/LoadingScreen.vue

@@ -2,13 +2,18 @@
 const app = useAppStore();
 const { isReady } = useAssets();
 const { t } = useI18n();
+
+const onClick = () => {
+  if (!isReady.value) return;
+  app.userHasInteracted = true;
+};
 </script>
 
 <template>
   <div
     class="fixed inset-0 bg-[#181818] flex flex-col items-center justify-center gap-4"
     :class="{ 'cursor-pointer': isReady }"
-    @click="isReady && (app.userHasInteracted = true)"
+    @click="onClick"
   >
     <svg
       viewBox="0 0 512 512"

app/composables/useAssets.ts.in

@@ -7,6 +7,18 @@ type Rect = [number, number, number, number];
 let atlasImage: HTMLImageElement | null = null;
 const modelCache = new Map<string, THREE.Group>();
 
+const createAudio = (path: string) => {
+  const audio = import.meta.client ? new Audio(path) : null;
+
+  return {
+    play: () => {
+      if (!audio) return;
+      audio.currentTime = 0;
+      audio.play().catch(() => {});
+    },
+  };
+};
+
 const loaded = ref(0);
 const total = ref({{TOTAL}});
 const isReady = computed(() => loaded.value === total.value);
@@ -93,9 +105,16 @@ type ModelTree = {
   [key: string]: THREE.Group | ModelTree;
 };
 
+export type AudioEntry = ReturnType<typeof createAudio>;
+
+type AudioTree = {
+  [key: string]: AudioEntry | AudioTree;
+};
+
 const assets = {
   images: {{IMAGES}} as const satisfies ImageTree,
   models: {{MODELS}} as const satisfies ModelTree,
+  audio: {{AUDIO}} as const satisfies AudioTree,
 };
 
 type Assets = typeof assets;