fix: Audio loading stucked

package.json

@@ -9,7 +9,8 @@
   "dependencies": {
     "@material/material-color-utilities": "^0.2.7",
     "@web-media/event-target": "^0.0.2",
-    "@web-media/phonograph": "^2.3.1",
+    "@web-media/phonograph": "2.3.2",
+    "debug": "^4.3.4",
     "standardized-audio-context": "^25.3.72",
     "stats.js": "^0.17.0",
     "three": "0.138.3",
@@ -18,6 +19,7 @@
   "devDependencies": {
     "@biomejs/biome": "1.7.3",
     "@parcel/transformer-glsl": "2.12.0",
+    "@types/debug": "^4.1.12",
     "@types/node": "^20.12.8",
     "@types/stats.js": "^0.17.3",
     "@types/three": "0.138.0",

src/manager/DebugManager.ts

@@ -1,10 +1,6 @@
-import type * as THREE from 'three';
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
+import type * as THREE from 'three'; 
 
 import type { ResourceTracker } from '../ResourceTracker';
-import { FrameRateLevel } from '../utils/TimeMagic';
-import { p1 } from './JoyConManager';
-import { timeManager } from './TimeManager';
 
 export const DebugManager = (
    camera: THREE.Camera,
@@ -26,13 +22,5 @@ export const DebugManager = (
    //     controls.update();
    // }, FrameRateLevel.D0);
 
-   const vJoyCon = new URLSearchParams(location.search).get('virtualJoyCon');
-   if (vJoyCon !== null) {
-      document.querySelector('.connect_section')?.classList.add('hidden');
-      document.querySelector('.connected')?.classList.remove('hidden');
-   }
-
-   //@ts-ignore
-   window.step = p1.mockStep;
    return {};
 };

src/manager/RunStatManager.ts

@@ -1,24 +1,24 @@
-import { P2_JOYCON } from '../stores/connection';
 import {
-   QUERY_PARAMETER,
    ROUTER_ID,
    isInfinite,
    isMultiple,
    isSingle,
 } from '../stores/router';
-import { HIGH_LIMIT, LOW_LIMIT, P1_SPM, P2_SPM } from '../stores/runStat';
+import { useLerp } from '../utils/lerp';
+import { P2_JOYCON } from '../stores/connection';
+import { STEP_EVENT } from '../utils/StepCounter';
+import { forceSelect } from '../utils/forceSelect';
 import { LowPassFilter } from '../utils/LowPassFilter';
 import { RateEstimator } from '../utils/RateEstimator';
 import { SpmStatPainter } from '../utils/SpmStatPainter';
-import { STEP_EVENT } from '../utils/StepCounter';
 import { FrameRateLevel } from '../utils/TimeMagic';
-import { forceSelect } from '../utils/forceSelect';
-import { useLerp } from '../utils/lerp';
-import { MULTIPLE_PLAYER_COLOR_PROGRESS, THEME_ID } from './ColorManager';
+import { HIGH_LIMIT, LOW_LIMIT, P1_SPM, P2_SPM } from '../stores/runStat';
+
 import { store } from './DataManager';
 import { p1, p2 } from './JoyConManager';
 import { timeLine } from './StoryManager';
 import { timeManager } from './TimeManager';
+import { MULTIPLE_PLAYER_COLOR_PROGRESS, THEME_ID } from './ColorManager';
 
 export const INFINITE_TIME_KEY = 'alice-run-inf-time';
 export const INFINITE_STEP_KEY = 'alice-run-inf-step';

src/manager/StoryManager.ts

@@ -1,3 +1,4 @@
+import debug from 'debug';
 import { Clip, Mp3DeMuxAdapter } from '@web-media/phonograph';
 
 import { THEME_ID } from './ColorManager';
@@ -8,13 +9,19 @@ import { DIFFICULTY } from '../stores/settings';
 import { FrameRateLevel } from '../utils/TimeMagic';
 import { globalAudioContext } from '../manager/AudioManager';
 import type { IPlayAudioStoryEvent } from '../stories/utils';
-import { QUERY_PARAMETER, ROUTER_ID, isSingle, isStory } from '../stores/router';
+import { QUERY_PARAMETER, ROUTER_ID, isStory } from '../stores/router';
 import { type ITimelineEvent, TimelineManager } from '../utils/TimeLine';
 
 import { timeManager } from './TimeManager';
 
 export const STORY_AUDIO_URL_BASE = 'https://resource.alice.is.not.ci/';
 
+const log = debug('story');
+const logAudio = log.extend('advanced-audio');
+const logEnd = log.extend('end');
+const logTheme = log.extend('theme');
+const logLowRpm = log.extend('low-rpm');
+
 export const timeLine = new TimelineManager(
    stories,
    {
@@ -27,39 +34,35 @@ export const timeLine = new TimelineManager(
 
          const id = x.detail.url;
 
-         performance.mark(`advancedAudio-${id}:load:start`);
-         clip.buffer().then(async () => {
-            performance.mark(`advancedAudio-${id}:play:start`);
+         logAudio(`[load] [start] ${id}`);
+         clip.canPlayThough.then((x) => {
+            logAudio(`[play] [start] ${id}`);
             clip.play().then((x) => {
-               performance.mark(`advancedAudio-${id}:play:end`);
-               performance.measure(
-                  `advancedAudio-${id}:play`,
-                  `advancedAudio-${id}:play:start`,
-                  `advancedAudio-${id}:play:end`,
-               );
+               logAudio(`[play] [ end ] ${id}`);
             });
          });
-         performance.mark(`advancedAudio-${id}:load:end`);
-         performance.measure(
-            `advancedAudio-${id}:load`,
-            `advancedAudio-${id}:load:start`,
-            `advancedAudio-${id}:load:end`,
-         );
+
+         clip.buffer().then(async () => {
+            logAudio(`[load] [ end ] ${id}`);
+         });
 
          return () => {
             clip.dispose();
          };
       },
       end: (x: ITimelineEvent<'end', null>) => {
+         logEnd('Session finished');
          const $finishTraining = document.querySelector('.finish-training') as HTMLDivElement | null;
          if ($finishTraining) {
             $finishTraining.click();
          }
       },
       theme: (x: ITimelineEvent<'theme', string>) => {
+         logTheme(x.detail);
          THEME_ID.value = x.detail;
       },
       lowRpm: (x: ITimelineEvent<'lowRpm', number>) => {
+         logLowRpm(x.detail);
          const d = DIFFICULTY.value;
          LOW_LIMIT.value = x.detail + ((d > 0) ? (d * (-1/120 * d + 5 / 2)) : d);
       },
@@ -69,6 +72,9 @@ export const timeLine = new TimelineManager(
    },
 );
 
+// @ts-ignore
+window.nextEvent = timeLine.nextEvent;
+
 export const StoryManager = () => {
    ROUTER_ID.subscribe(() => {      
       if (isStory()) {

src/utils/TimeLine.ts

@@ -68,6 +68,13 @@ export class TimelineManager<T extends ITimelineEvent<string, any>[]> {
       this.disposers.clear();
    }
 
+   nextEvent = (skip = 0) => {
+      if (!this.events) return;
+      this.eventIndex += skip;
+      this.onEvent(this.events[this.eventIndex]);
+      this.eventIndex++;
+   }
+
    tick = (timestamp: number) => {
       if (this.isPaused) return;
       if (!this.events) return;
@@ -81,8 +88,7 @@ export class TimelineManager<T extends ITimelineEvent<string, any>[]> {
          this.eventIndex < this.events.length &&
          this.events[this.eventIndex].time + this.startTime <= timestamp
       ) {
-         this.onEvent(this.events[this.eventIndex]);
-         this.eventIndex++;
+         this.nextEvent();
       }
 
       this.timeLeft = this.totalTime - (timestamp - this.startTime);

yarn.lock

@@ -1288,6 +1288,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/debug@npm:^4.1.12":
+  version: 4.1.12
+  resolution: "@types/debug@npm:4.1.12"
+  dependencies:
+    "@types/ms": "npm:*"
+  checksum: 10/47876a852de8240bfdaf7481357af2b88cb660d30c72e73789abf00c499d6bc7cd5e52f41c915d1b9cd8ec9fef5b05688d7b7aef17f7f272c2d04679508d1053
+  languageName: node
+  linkType: hard
+
+"@types/ms@npm:*":
+  version: 0.7.34
+  resolution: "@types/ms@npm:0.7.34"
+  checksum: 10/f38d36e7b6edecd9badc9cf50474159e9da5fa6965a75186cceaf883278611b9df6669dc3a3cc122b7938d317b68a9e3d573d316fcb35d1be47ec9e468c6bd8a
+  languageName: node
+  linkType: hard
+
 "@types/node@npm:^20.12.8":
   version: 20.12.8
   resolution: "@types/node@npm:20.12.8"
@@ -1349,14 +1365,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@web-media/phonograph@npm:^2.3.1":
-  version: 2.3.1
-  resolution: "@web-media/phonograph@npm:2.3.1"
+"@web-media/phonograph@npm:2.3.2":
+  version: 2.3.2
+  resolution: "@web-media/phonograph@npm:2.3.2"
   dependencies:
     "@web-media/event-target": "npm:^0.0.2"
     "@web-media/open-promise": "npm:^0.3.2"
     standardized-audio-context: "npm:25.3.54"
-  checksum: 10/9f5915d8c74dab37f321b8dae726fd7cd5b865b450006a0e13fc61503d5541a0d7800099d410ddf3f380afb610d56dcc2a14d4f41108ce963ecd415ce0cd323a
+  checksum: 10/67fa7d625b1e96a6504476584a5421634aed40842e18ecc78eb69dd631594760a10aa3b541ee2379f8ce9b8a9e3110e940adb993a2182dd48ede127bd79edbbd
   languageName: node
   linkType: hard
 
@@ -3480,12 +3496,14 @@ __metadata:
     "@biomejs/biome": "npm:1.7.3"
     "@material/material-color-utilities": "npm:^0.2.7"
     "@parcel/transformer-glsl": "npm:2.12.0"
+    "@types/debug": "npm:^4.1.12"
     "@types/node": "npm:^20.12.8"
     "@types/stats.js": "npm:^0.17.3"
     "@types/three": "npm:0.138.0"
     "@types/w3c-web-hid": "npm:^1.0.2"
     "@web-media/event-target": "npm:^0.0.2"
-    "@web-media/phonograph": "npm:^2.3.1"
+    "@web-media/phonograph": "npm:2.3.2"
+    debug: "npm:^4.3.4"
     parcel: "npm:2.12.0"
     parcel-reporter-static-files-copy: "npm:^1.5.3"
     process: "npm:^0.11.10"