move init audio state (#9317)

EtherealEngine · Nov 22, 2023 · 4aece7a · 4aece7a
1 parent 8d3d20d
commit 4aece7a
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 21 deletions.
diff --git a/packages/engine/src/audio/AudioState.ts b/packages/engine/src/audio/AudioState.ts
@@ -78,9 +78,19 @@ export const useAudioState = () => {
   const audioState = useHookstate(getMutableState(AudioState))
 
   useEffect(() => {
-    const audioContext = getState(AudioState).audioContext
+    const AudioContext = globalThis.AudioContext || globalThis.webkitAudioContext
+    if (!AudioContext) return
+
+    const audioContext = new AudioContext()
+    audioContext.resume()
 
     const audioState = getMutableState(AudioState)
+    audioState.audioContext.set(audioContext)
+
+    const cameraGainNode = audioContext.createGain()
+    audioState.cameraGainNode.set(cameraGainNode)
+    cameraGainNode.connect(audioContext.destination)
+
     const currentTime = audioState.audioContext.currentTime.value
 
     audioState.cameraGainNode.gain.value.setTargetAtTime(audioState.masterVolume.value, currentTime, 0.01)
@@ -131,48 +141,54 @@ export const useAudioState = () => {
   }, [])
 
   useEffect(() => {
+    if (!audioState.audioContext.value) return
     audioState.cameraGainNode.value.gain.setTargetAtTime(
       audioState.masterVolume.value,
       audioState.audioContext.value.currentTime,
       0.01
     )
-  }, [audioState.masterVolume])
+  }, [audioState.audioContext, audioState.masterVolume])
 
   useEffect(() => {
+    if (!audioState.audioContext.value) return
     audioState.gainNodeMixBuses.value.mediaStreams.gain.setTargetAtTime(
       audioState.mediaStreamVolume.value,
       audioState.audioContext.value.currentTime,
       0.01
     )
-  }, [audioState.mediaStreamVolume])
+  }, [audioState.audioContext, audioState.mediaStreamVolume])
 
   useEffect(() => {
+    if (!audioState.audioContext.value) return
     audioState.gainNodeMixBuses.value.notifications.gain.setTargetAtTime(
       audioState.notificationVolume.value,
       audioState.audioContext.value.currentTime,
       0.01
     )
-  }, [audioState.notificationVolume])
+  }, [audioState.audioContext, audioState.notificationVolume])
 
   useEffect(() => {
+    if (!audioState.audioContext.value) return
     audioState.gainNodeMixBuses.value.soundEffects.gain.setTargetAtTime(
       audioState.soundEffectsVolume.value,
       audioState.audioContext.value.currentTime,
       0.01
     )
-  }, [audioState.soundEffectsVolume])
+  }, [audioState.audioContext, audioState.soundEffectsVolume])
 
   useEffect(() => {
+    if (!audioState.audioContext.value) return
     audioState.gainNodeMixBuses.value.music.gain.setTargetAtTime(
       audioState.backgroundMusicVolume.value,
       audioState.audioContext.value.currentTime,
       0.01
     )
-  }, [audioState.backgroundMusicVolume])
+  }, [audioState.audioContext, audioState.backgroundMusicVolume])
 
   useEffect(() => {
+    if (!audioState.positionalMedia.value) return
     getMutableState(MediaSettingsState).immersiveMedia.set(audioState.positionalMedia.value)
-  }, [audioState.positionalMedia])
+  }, [audioState.audioContext, audioState.positionalMedia])
 }
 
 export const getPositionalMedia = () => {

diff --git a/packages/engine/src/audio/systems/MediaSystem.ts b/packages/engine/src/audio/systems/MediaSystem.ts
@@ -141,9 +141,8 @@ const reactor = () => {
   if (!isClient) return null
 
   useEffect(() => {
-    const audioContext = getState(AudioState).audioContext
-
     const enableAudioContext = () => {
+      const audioContext = getState(AudioState).audioContext
       if (audioContext.state === 'suspended') audioContext.resume()
     }
 

diff --git a/packages/engine/src/initializeBrowser.ts b/packages/engine/src/initializeBrowser.ts
@@ -27,7 +27,6 @@ import { BotUserAgent } from '@etherealengine/common/src/constants/BotUserAgent'
 import { getMutableState } from '@etherealengine/hyperflux'
 import { WebLayerManager } from '@etherealengine/xrui'
 
-import { AudioState } from './audio/AudioState'
 import { CameraComponent } from './camera/components/CameraComponent'
 import { Engine } from './ecs/classes/Engine'
 import { EngineState } from './ecs/classes/EngineState'
@@ -41,16 +40,6 @@ import { ObjectLayers } from './scene/constants/ObjectLayers'
  * initializes everything for the browser context
  */
 export const initializeBrowser = () => {
-  const audioState = getMutableState(AudioState)
-
-  const audioContext = new (globalThis.AudioContext || globalThis.webkitAudioContext)()
-  audioContext.resume()
-  audioState.audioContext.set(audioContext)
-
-  const cameraGainNode = audioContext.createGain()
-  audioState.cameraGainNode.set(cameraGainNode)
-  cameraGainNode.connect(audioContext.destination)
-
   const camera = getComponent(Engine.instance.cameraEntity, CameraComponent)
 
   camera.layers.disableAll()
@@ -63,7 +52,7 @@ export const initializeBrowser = () => {
 
   EngineRenderer.instance.initialize()
   const renderer = EngineRenderer.instance.renderer
-  if (!renderer) throw new Error('EngineRenderer.instance.renderer must exist before initializing XRUISystem')
+  if (!renderer) throw new Error('EngineRenderer.instance.renderer does not exist!')
 
   WebLayerManager.initialize(renderer)
   WebLayerManager.instance.ktx2Encoder.pool.setWorkerLimit(1)