import { App } from './view/components/App' ; import { ClockRealtime } from '@fms-cat/experimental' ; import { GLCat } from '@fms-cat/glcat-ts' ; import { MIDIMAN } from './MIDIManager' ; import { MIDIParams } from './MIDIParams' ; import { Mixer } from './Mixer' ; import React from 'react' ; import ReactDOM from 'react-dom' ; import { WavenerdDeck } from '@fms-cat/wavenerd-deck' ; const canvas = document . createElement ( 'canvas' ) ; const gl = canvas . getContext ( 'webgl2' ) ! ; const glCat = new GLCat ( gl ) ; const audio = new AudioContext ( ) ; audio . suspend ( ) ; const deckOptions = { glCat , audio , bufferLength : 48000 , } ; const deckA = new WavenerdDeck ( deckOptions ) ; const deckB = new WavenerdDeck ( { ... deckOptions , hostDeck : deckA } ) ; const mixer = new Mixer ( audio ) ; deckA . node . connect ( mixer . inputL ) ; deckB . node . connect ( mixer . inputR ) ; mixer . output . connect ( audio . destination ) ; const clock = new ClockRealtime ( ) ; clock . play ( ) ; function update ( ) { requestAnimationFrame ( update ) ; clock . update ( ) ; deckA . update ( ) ; deckB . update ( ) ; mixer . updateLevelMeter ( clock . deltaTime ) ; } update ( ) ; MIDIMAN . on ( 'paramChange' , ( { key , value } ) => { if ( key === MIDIParams . XFader ) { mixer . xFaderPos = value ; } } ) ; const container = document . createElement ( 'div' ) ; document . body . appendChild ( container ) ; ReactDOM . render ( < App deckA = { deckA } deckB = { deckB } mixer = { mixer } / > , container ) ;