Update example

speechmatics · Feb 26, 2025 · 0488e57 · 0488e57
1 parent 50cbb79
commit 0488e57
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 139 deletions.
diff --git a/examples/nextjs-flow/components/AudioProvider.tsx b/examples/nextjs-flow/components/AudioProvider.tsx
@@ -11,10 +11,8 @@ import {
 } from 'react';
 
 export function AudioProvider({ children }: PropsWithChildren) {
-  // Separate audio contexts for recording and playback.
-  // In practice they will be the same AudioContext, except in Firefox where sample rates may differ
-  // See bug tracked here: https://bugzilla.mozilla.org/show_bug.cgi?id=1725336https://bugzilla.mozilla.org/show_bug.cgi?id=1725336
-  // TODO: If/when the bug is fixed, we can use the same audio context for both recording and playback
+  // Get audio contexts for input and playback
+  // (see note above `useAudioContexts` for more info)
   const { inputAudioContext, playbackAudioContext } = useAudioContexts();
 
   return (
@@ -32,6 +30,10 @@ export function AudioProvider({ children }: PropsWithChildren) {
   );
 }
 
+// This hook returns audio contexts for recording and playback.
+// In practice they will be the same AudioContext, except in Firefox where sample rates may differ
+// See bug tracked here: https://bugzilla.mozilla.org/show_bug.cgi?id=1725336https://bugzilla.mozilla.org/show_bug.cgi?id=1725336
+// TODO: If/when the bug is fixed, we can use the same audio context for both recording and playback
 function useAudioContexts() {
   const hydrated = useHydrated();
   const inputAudioContext = useMemo(
@@ -53,13 +55,15 @@ function useAudioContexts() {
   return { inputAudioContext, playbackAudioContext };
 }
 
+// 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 () => {

diff --git a/examples/nextjs-flow/hooks/useFlowWithBrowserAudio.ts b/examples/nextjs-flow/hooks/useFlowWithBrowserAudio.ts
diff --git a/examples/nextjs-flow/hooks/useStartFlowSession.ts b/examples/nextjs-flow/hooks/useStartFlowSession.ts
diff --git a/packages/browser-audio-input-react/src/use-pcm-audio-recorder.tsx b/packages/browser-audio-input-react/src/use-pcm-audio-recorder.tsx
@@ -20,7 +20,7 @@ type UsePCMAudioRecorderReturn = {
 
 export function usePCMAudioRecorder(
   workletScriptURL: string,
-  audioContext?: AudioContext,
+  audioContext: AudioContext | undefined,
 ): UsePCMAudioRecorderReturn {
   const recorder = useMemo(
     () => new PCMRecorder(workletScriptURL),

diff --git a/packages/web-pcm-player-react/src/use-pcm-audio-player.ts b/packages/web-pcm-player-react/src/use-pcm-audio-player.ts
@@ -2,7 +2,7 @@
 import { PCMPlayer } from '@speechmatics/web-pcm-player';
 import { useMemo, useCallback, useSyncExternalStore } from 'react';
 
-export function usePCMAudioPlayer(audioContext?: AudioContext) {
+export function usePCMAudioPlayer(audioContext: AudioContext | undefined) {
   const player = useMemo(() => {
     if (!audioContext) {
       return null;