Audio

<Audio controls>
  <h2>Hey there my friend, how are you?</h2>
  <p>
    With Fullstack Components you can easily build Next.js
    applications powered by AI. The set of tools includes Server
    Components, custom hooks and much more!
  </p>
  <p>
    In this example, I'm using the <code>Audio</code> component to
    generate speech from text. You can read more about it in the
    documentation below.
  </p>
  <p>See you around!</p>
</Audio>

// Using a video element for this demo
// to visibly show the captions.
// The `<Audio>` Server Component already uses `<Track>`.
<video
  controls
  className="aspect-video w-full [&::cue]:text-base"
>
  <source
    src="/my-super-original-podcast.mp3"
    type="audio/mpeg"
  />
  <Track src="/my-super-original-podcast.mp3" default />
</video>

<Transcript
  src="/my-super-original-podcast.mp3"
  as="p"
  className="text-lg"
/>

'use client'
import { useAudio } from '@trikinco/fullstack-components/client'
 
export default function Page() {
  const {
    play,
    pause,
    setPlayBackRate,
    isLoading,
    data,
    audioRef,
  } = useAudio({
    mode: 'speech',
    content: "Hey there, what's up?",
  })
 
  if (isLoading) {
    return 'Loading...'
  }
 
  return (
    <div>
      <audio ref={audioRef} controls>
        <source src={data} type="audio/mpeg" />
      </audio>
      <div className="flex gap-3">
        <button onClick={() => play()}>Play</button>
        <button onClick={() => pause()}>Pause</button>
        <button onClick={() => setPlayBackRate(1)}>1.0x</button>
        <button onClick={() => setPlayBackRate(2)}>2.0x</button>
      </div>
    </div>
  )
}

import { getAudio } from '@trikinco/fullstack-components'
 
export default async function Page() {
  const { responseFile, contentType } = await getAudio({
    mode: 'speech',
    content: 'It is Wednesday my dudes',
    voice: 'onyx',
  })
 
  if (!responseFile) return 'No reminders.'
 
  const base64String =
    Buffer.from(responseFile).toString('base64')
 
  return (
    <a
      href={`data:${contentType};base64,${base64String}`}
      download
    >
      Download reminder
    </a>
  )
}

import {
  handleFSComponents,
  handleAudioRequest,
  type FSCOptions,
} from '@trikinco/fullstack-components'
 
const fscOptions: FSCOptions = {
  audio: handleAudioRequest({
    openAiApiKey: process.env.OPENAI_API_KEY || '',
  }),
  // Additional options and handlers...
}
 
const fscHandler = handleFSComponents(fscOptions)
 
export { fscHandler as GET, fscHandler as POST }