diff --git a/apps/demo-nextjs-app-router/app/streaming/audio/page.tsx b/apps/demo-nextjs-app-router/app/streaming/audio/page.tsx index b624197..3ca5616 100644 --- a/apps/demo-nextjs-app-router/app/streaming/audio/page.tsx +++ b/apps/demo-nextjs-app-router/app/streaming/audio/page.tsx @@ -11,8 +11,13 @@ type PlayHTInput = { text: string; }; +const DEFAULT_PROMPT = + 'Hey, this is Daniel from fal (dot) ai. Please hold on a moment, let me just um pull up your details real quick. Can you tell me your account email or, your phone number?'; + export default function AudioStreamingDemo() { + const [prompt, setPrompt] = useState(DEFAULT_PROMPT); const [streamStatus, setStreamStatus] = useState('idle'); + const [timeToFirstChunk, setTimeToFirstChunk] = useState(null); const audioRef = useRef(null); const mediaSourceRef = useRef(null); @@ -55,31 +60,44 @@ export default function AudioStreamingDemo() { }, []); const runInference = async () => { + setTimeToFirstChunk(null); + const startedAt = Date.now(); const stream = await fal.stream( 'fal-ai/playht-tts', { input: { - text: 'Do you know who drew this picture and what is the name of it?', + text: prompt, }, } ); setStreamStatus('running'); - await audioRef.current?.play(); + // await audioRef.current?.play(); + let firstChunk = true; stream.on('data', (data: Uint8Array) => { + if (audioRef.current?.paused) { + audioRef.current?.play(); + } + console.log('Received data', data); + if (firstChunk) { + setTimeToFirstChunk(Date.now() - startedAt); + firstChunk = false; + } const sourceBuffer = sourceBufferRef.current; + console.log('sourceBuffer before', sourceBuffer); if (sourceBuffer) { - console.log('Appending buffer...'); + // console.log('Appending buffer...'); sourceBuffer.appendBuffer(data); - // console.log('sourceBuffer', sourceBuffer); + // console.log('sourceBuffer after', sourceBuffer); } else { console.warn('Source buffer not found or not ready'); } }); const result = await stream.done(); - console.log('result', result); + // console.log('result', result); + sourceBufferRef.current?.appendBuffer(result); setStreamStatus('done'); sourceBufferRef.current?.addEventListener('updateend', () => { mediaSourceRef.current?.endOfStream(); @@ -94,10 +112,17 @@ export default function AudioStreamingDemo() { streaming -
+
+