From 14f78f742cf68fdae19be95c08731665b772c498 Mon Sep 17 00:00:00 2001 From: LOSSES Don <1384036+Losses@users.noreply.github.com> Date: Sun, 19 May 2024 11:31:08 +0800 Subject: [PATCH] fix: Audio loading stucked --- package.json | 4 +++- src/manager/DebugManager.ts | 14 +------------ src/manager/RunStatManager.ts | 14 ++++++------- src/manager/StoryManager.ts | 38 ++++++++++++++++++++--------------- src/utils/TimeLine.ts | 10 +++++++-- yarn.lock | 28 +++++++++++++++++++++----- 6 files changed, 64 insertions(+), 44 deletions(-) diff --git a/package.json b/package.json index 32964c5..d023a1c 100644 --- a/package.json +++ b/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", diff --git a/src/manager/DebugManager.ts b/src/manager/DebugManager.ts index fb6e8cd..3ec1dd8 100644 --- a/src/manager/DebugManager.ts +++ b/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 {}; }; diff --git a/src/manager/RunStatManager.ts b/src/manager/RunStatManager.ts index e2327e8..09f6c49 100644 --- a/src/manager/RunStatManager.ts +++ b/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'; diff --git a/src/manager/StoryManager.ts b/src/manager/StoryManager.ts index dcab9c2..95a6989 100644 --- a/src/manager/StoryManager.ts +++ b/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()) { diff --git a/src/utils/TimeLine.ts b/src/utils/TimeLine.ts index 029f340..047ba1e 100644 --- a/src/utils/TimeLine.ts +++ b/src/utils/TimeLine.ts @@ -68,6 +68,13 @@ export class TimelineManager[]> { 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[]> { 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); diff --git a/yarn.lock b/yarn.lock index e6a1edd..bcf1ea2 100644 --- a/yarn.lock +++ b/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"