fix(game): Fix first start latency

Author: MisaLiu

src/audio/clip.ts

@@ -38,7 +38,7 @@ export class GameAudioClip {
     this.channel = null;
   }
 
-  play() {
+  play(playOffsetFix: number = 0) {
     if (!this.channel) throw new Error('Cannot play a clip directly without any channel');
     if (this.status === EGameAudioClipStatus.PLAY) return;
 
@@ -47,12 +47,12 @@ export class GameAudioClip {
     this.buffer.connect(this.channel.gain);
 
     if (isNaN(this.pauseTime)) {
-      this.startTime = this.clock.time;
       this.buffer.start(0, 0);
+      this.startTime = this.clock.time - playOffsetFix;
     } else {
       const pausedTime = this.pauseTime - this.startTime;
-      this.startTime = this.clock.time - pausedTime;
       this.buffer.start(0, pausedTime / 1000);
+      this.startTime = this.clock.time - pausedTime;
     }
 
     this.pauseTime = NaN;

src/audio/index.ts

@@ -51,16 +51,12 @@ const handleWindowLoaded = () => {
 
   if (GlobalAudioCtx.state === 'running') return;
   window.addEventListener('pointerdown', resumeAudio);
-  window.addEventListener('pointerover', resumeAudio);
-  window.addEventListener('pointerleave', resumeAudio);
 };
 
 GlobalAudioCtx.addEventListener('statechange', () => {
   if (GlobalAudioCtx.state !== 'running') return;
 
   console.info('[Audio]', 'Resume audio success');
   window.removeEventListener('pointerdown', resumeAudio);
-  window.removeEventListener('pointerover', resumeAudio);
-  window.removeEventListener('pointerleave', resumeAudio);
 });
 window.addEventListener('load', handleWindowLoaded);

src/chart/index.ts

@@ -120,12 +120,12 @@ export class GameChart {
     this.score.resize(sizer);
   }
 
-  start() {
+  start(playOffsetFix: number = 0) {
     this.ticker.add(this.onTick);
     this.ticker.start();
 
     this.game.audio.channels.effect.startTicker();
-    this.audio.play();
+    this.audio.play(playOffsetFix);
   }
 
   reset() {

src/game.ts

@@ -59,6 +59,8 @@ export class Game {
       console.error('No skin loaded');
       return;
     }
+
+    const playOffsetFixStart = performance.now();
     await currentSkin.create(options.useHighQualitySkin);
     this.stage.set(null);
 
@@ -73,7 +75,7 @@ export class Game {
 
     this.renderer.containers.game.sortChildren();
     this.chart.reszie(this.renderer.size);
-    this.chart.start();
+    this.chart.start(playOffsetFixStart - performance.now());
 
     res(this.chart);
     console.log(this);