Making your CV talk 🤖 How to read audio stream on client using Next JS?

Considering that our backend exposes url which streams audio solution is rather simple, we make use of html Audio element and use the correct path.

Nothing about this is Next JS related, this is pure React JS TS solution, so you can use it in your React JS code base as well.

For this purpose I created React component that can be re used.
Code here: https://github.com/nmitic/nikola.mitic.dev/blob/745b103829874d0bb7b19d1668d793b99e23653b/components/InterviewerAITalk/components/AudioAnswer.tsx

export const AudioAnswer = ({
  question,
  onAnswerDone,
  onAnswerStart,
}: {
  question: string;
  onAnswerDone: () => void;
  onAnswerStart: () => void;
}) => {
  const demo = process.env.NEXT_PUBLIC_AI_DEMO === "true";

  return (
    <audio autoPlay onPlay={onAnswerStart} onEnded={onAnswerDone}>
      <source
        src={`${process.env.NEXT_PUBLIC_AI_INTERVIEWER_SERVICE}/api/talk?question=${question}&demo=${demo}`}
        type="audio/mp3"
      />
    </audio>
  );
};

❤️If you would like to stay it touch please feel free to connect❤️

Blog

Making your CV talk 🤖 How to read audio stream on client using Next JS?

Nikola Mitic

Join Our Newsletter. No Spam, Only the good stuff.

Related