wip feature: MusicOffline

src/config.ts

@@ -1,8 +1,4 @@
 export const
-  MUSIC_BPM = 140.0,
-  MUSIC_LENGTH = 169,
-  MUSIC_AUTOMATON_TEXTURE_HEIGHT = 16,
-  AO_RESOLUTION_RATIO = 1.0,
   AO_ITER = 16,
   IBLLUT_ITER = 400,
   IBLLUT_SIZE = 256,

src/globals/automaton.ts

@@ -1,10 +1,10 @@
 import { Automaton } from '@0b5vr/automaton';
 import { AutomatonWithGUI } from '@0b5vr/automaton-with-gui';
-import { MUSIC_BPM } from '../config';
+import { MUSIC_BPM } from '../music/constants';
 import { Music } from '../music/Music';
 import { fxDefinitions } from './automaton-fxs/fxDefinitions';
 import { getDivAutomaton } from './dom';
-import { resetGLSLMusicEditor } from '../music/glslMusicEditor';
+import { glslMusicEditor } from './glslMusicEditor';
 import automatonData from '../automaton.json';
 
 // it's pointless to live reload automatonData
@@ -43,11 +43,11 @@ export function automatonSetupMusic( music: Music ): void {
   if ( import.meta.env.DEV ) {
     const automatonWithGUI = automaton as AutomatonWithGUI;
 
-    automatonWithGUI.on( 'play', () => { music.isPlaying = true; } );
-    automatonWithGUI.on( 'pause', () => { music.isPlaying = false; } );
+    automatonWithGUI.on( 'play', () => { music.play(); } );
+    automatonWithGUI.on( 'pause', () => { music.pause(); } );
     automatonWithGUI.on( 'seek', ( { time } ) => {
       music.time = Math.max( 0.0, time / MUSIC_BPM * 60.0 );
-      resetGLSLMusicEditor();
+      glslMusicEditor.reset();
       automatonWithGUI.reset();
     } );
 

src/globals/globalObservers.ts

@@ -1,11 +1,9 @@
 import { ComponentUpdateEvent } from '../heck/components/Component';
-
-export type Observer<T> = ( arg: T ) => void;
+import { Observer } from '../utils/Observer';
 
 export const resizeObservers: Observer<[ width: number, height: number ]>[] = [];
 export const editorVisibleObservers: Observer<boolean>[] = [];
+export const musicRendererStatusObservers: Observer<'none' | 'compiling' | 'applying'>[] = [];
 export const preparationProgressObservers: Observer<number>[] = [];
 export const audioAnalyzerObservers: Observer<void>[] = [];
 export const componentUpdateObservers: Observer<ComponentUpdateEvent>[] = [];
-export const shaderEventApplyObservers: Observer<void>[] = [];
-export const shaderEventAlterObservers: Observer<void>[] = [];

src/globals/glslMusicEditor.ts

@@ -0,0 +1,3 @@
+import { GLSLMusicEditor } from '../music/GLSLMusicEditor';
+
+export const glslMusicEditor = new GLSLMusicEditor();

src/globals/music.ts

@@ -1,7 +1,27 @@
 import { Music } from '../music/Music';
+import { MusicOffline } from '../music/MusicOffline';
+import { audio } from './audio';
+import { audioReverb } from './audioReverb';
 import { automatonSetupMusic } from './automaton';
+import { promiseGui } from './gui';
 
-const music = new Music();
+const music: Music = new MusicOffline();
+
+music.gainNode.connect( audioReverb );
+music.gainNode.connect( audio.destination );
+
+if ( import.meta.env.DEV ) {
+  music.gainNode.gain.value = 0.0;
+  promiseGui.then( ( gui ) => {
+    gui.button( 'audio/resume', { title: 'audio.resume();' } ).on( 'click', () => {
+      audio.resume();
+    } );
+
+    gui.input( 'audio/volume', 0.0, { min: 0.0, max: 1.0 } )?.on( 'change', ( { value } ) => {
+      music.gainNode.gain.value = value;
+    } );
+  } );
+}
 
 automatonSetupMusic( music );
 

src/main.ts

@@ -89,14 +89,12 @@ if ( !import.meta.env.DEV ) {
     // -- esc handler ------------------------------------------------------------------------------
     window.addEventListener( 'keydown', ( event ) => {
       if ( event.code === 'Escape' ) {
-        music.isPlaying = false;
-        music.update();
+        music.pause();
         dog.active = false;
       }
     } );
 
     // -- let's go ---------------------------------------------------------------------------------
-    music.time = 0.0;
-    music.isPlaying = true;
+    music.play();
   } );
 }

src/music/AudioBufferPlayer.ts

@@ -0,0 +1,61 @@
+import { audio } from '../globals/audio';
+
+export class AudioBufferPlayer {
+  public gainNode: GainNode;
+  public buffer?: AudioBuffer;
+
+  private __currentSource?: AudioBufferSourceNode | null;
+  private __beginTime: number;
+  private __pausedTime: number;
+
+  public get isPlaying(): boolean {
+    return this.__currentSource != null;
+  }
+
+  public get time(): number {
+    if ( this.__currentSource != null ) {
+      return audio.currentTime - this.__beginTime;
+    } else {
+      return this.__pausedTime;
+    }
+  }
+
+  public set time( time: number ) {
+    const { isPlaying } = this;
+
+    this.pause();
+    this.__pausedTime = time;
+
+    if ( isPlaying ) {
+      this.play();
+    }
+  }
+
+  public constructor() {
+    this.gainNode = audio.createGain();
+
+    this.__beginTime = 0.0;
+    this.__pausedTime = 0.0;
+  }
+
+  public play(): void {
+    this.pause();
+
+    this.__currentSource = audio.createBufferSource();
+    this.__currentSource.connect( this.gainNode );
+    this.__currentSource.buffer = this.buffer!;
+    this.__currentSource.start( 0.0, this.__pausedTime );
+
+    this.__beginTime = audio.currentTime - this.__pausedTime;
+  }
+
+  public pause(): void {
+    if ( this.__currentSource != null ) {
+      this.__currentSource.stop();
+      this.__currentSource.disconnect();
+      this.__currentSource = null;
+
+      this.__pausedTime = audio.currentTime - this.__beginTime;
+    }
+  }
+}