[Bugfix] update Audio context creation (#5476)

* update context creation

* Change files

* fix audio test issue

change-beta/@azure-communication-react-e0efc724-fb57-4670-a7dd-91417bb601da.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Audio Context",
+  "comment": "Fix issue where AudioContext for composites is made too early",
+  "packageName": "@azure/communication-react",
+  "email": "dmceachern@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-e0efc724-fb57-4670-a7dd-91417bb601da.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Audio Context",
+  "comment": "Fix issue where AudioContext for composites is made too early",
+  "packageName": "@azure/communication-react",
+  "email": "dmceachern@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-composites/src/composites/common/AudioProvider.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import React, { useContext, createContext } from 'react';
+import React, { useContext, createContext, useState, useEffect } from 'react';
 
 /**
  * @private
@@ -18,19 +18,26 @@ export interface ACSAudioProviderProps {
  */
 export const ACSAudioProvider = (props: ACSAudioProviderProps): JSX.Element => {
   const { audioContext, children } = props;
+  const [stateAudioContext, setStateAudioContext] = useState<AudioContext | undefined>(undefined);
+
+  useEffect(() => {
+    // Create the AudioContext only when the component is rendered
+    setStateAudioContext(audioContext);
+  }, [audioContext]);
+
   const alreadyWrapped = useAudio();
   if (alreadyWrapped) {
     return <>{children}</>;
   }
-  return <ACSAudioContext.Provider value={audioContext}>{props.children}</ACSAudioContext.Provider>;
+  return <ACSAudioContext.Provider value={stateAudioContext}>{props.children}</ACSAudioContext.Provider>;
 };
 
 /**
  * @private
  */
-const ACSAudioContext = createContext<AudioContext>(new AudioContext());
+const ACSAudioContext = createContext<AudioContext | undefined>(undefined);
 
 /**
  * @private
  */
-export const useAudio = (): AudioContext => useContext(ACSAudioContext);
+export const useAudio = (): AudioContext | undefined => useContext(ACSAudioContext);