From 4aece7a2ebc09043eddb90aea091371419da662d Mon Sep 17 00:00:00 2001
From: Josh Field <joshfield999@gmail.com>
Date: Wed, 22 Nov 2023 15:48:12 +1100
Subject: [PATCH] move init audio state (#9317)

---
 packages/engine/src/audio/AudioState.ts       | 30 ++++++++++++++-----
 .../engine/src/audio/systems/MediaSystem.ts   |  3 +-
 packages/engine/src/initializeBrowser.ts      | 13 +-------
 3 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/packages/engine/src/audio/AudioState.ts b/packages/engine/src/audio/AudioState.ts
index 228a41ef57..7211454f03 100644
--- 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
index 7ad503e904..f46e0d8f58 100755
--- 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
index b0f5e5f0d9..59b5b1feb1 100644
--- 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)