Fix types version in examples

examples/nextjs-real-time-transcription/app/page.tsx

@@ -2,11 +2,11 @@ import {
   getFeatures,
   RealtimeTranscriptionProvider,
 } from '@speechmatics/real-time-client-react';
-import { PCMAudioRecorderProvider } from '@speechmatics/browser-audio-input-react';
 import type { Metadata } from 'next';
 import { Controls } from '@/components/Controls';
 import { Output } from '@/components/Output';
 import { Status } from '@/components/Status';
+import { AudioProvider } from '@/components/AudioProvider';
 
 export const metadata: Metadata = {
   title: 'Speechmatics Real-time example',
@@ -21,7 +21,7 @@ export default async function Page() {
   );
 
   return (
-    <PCMAudioRecorderProvider workletScriptURL="/js/pcm-audio-worklet.min.js">
+    <AudioProvider>
       <RealtimeTranscriptionProvider appId="nextjs-rt-example">
         <section>
           <h3>Real-time Example</h3>
@@ -34,6 +34,6 @@ export default async function Page() {
           </section>
         </section>
       </RealtimeTranscriptionProvider>
-    </PCMAudioRecorderProvider>
+    </AudioProvider>
   );
 }

examples/nextjs-real-time-transcription/components/AudioProvider.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { useAudioContext } from '@/lib/hooks/useAudioContext';
+import { PCMAudioRecorderProvider } from '@speechmatics/browser-audio-input-react';
+import type { PropsWithChildren } from 'react';
+
+export function AudioProvider({ children }: PropsWithChildren) {
+  const audioContext = useAudioContext();
+
+  return (
+    <PCMAudioRecorderProvider
+      audioContext={audioContext}
+      workletScriptURL="/js/pcm-audio-worklet.min.js"
+    >
+      {children}
+    </PCMAudioRecorderProvider>
+  );
+}

examples/nextjs-real-time-transcription/lib/hooks/useAudioContext.ts

@@ -0,0 +1,36 @@
+import { useEffect, useMemo, useSyncExternalStore } from 'react';
+import { RECORDING_SAMPLE_RATE } from '../constants';
+
+export function useAudioContext() {
+  const hydrated = useHydrated();
+  const audioContext = useMemo(
+    () =>
+      hydrated
+        ? new window.AudioContext({ sampleRate: RECORDING_SAMPLE_RATE })
+        : undefined,
+    [hydrated],
+  );
+
+  useCleanupAudioContext(audioContext);
+
+  return audioContext;
+}
+
+// Lets us know if we're rendering client side or not
+const useHydrated = () =>
+  useSyncExternalStore(
+    () => () => {},
+    () => true,
+    () => false,
+  );
+
+// Close audio context when component unmounts
+function useCleanupAudioContext(context?: AudioContext) {
+  useEffect(() => {
+    return () => {
+      if (context && context.state !== 'closed') {
+        context.close();
+      }
+    };
+  }, [context]);
+}

examples/nextjs-real-time-transcription/package.json

@@ -24,8 +24,7 @@
   },
   "devDependencies": {
     "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/react": "^19.0.10",
     "copy-webpack-plugin": "^12.0.2",
     "typescript": "^5"
   }

packages/browser-audio-input-react/package.json

@@ -31,7 +31,7 @@
     "react": "^18 || ^19"
   },
   "devDependencies": {
-    "@types/react": "^18.3.12",
+    "@types/react": "^19.0.10",
     "typescript-event-target": "^1.1.1"
   }
 }

packages/web-pcm-player-react/README.md

@@ -70,4 +70,9 @@ export default function Index() {
   );
 }
 
-```
+```
+
+
+## React context
+
+This

packages/web-pcm-player-react/package.json

@@ -24,7 +24,7 @@
     "react": "^18 || ^19"
   },
   "devDependencies": {
-    "@types/react": "^18.3.12",
+    "@types/react": "^19.0.10",
     "typescript-event-target": "^1.1.1"
   }
 }