DEV Community

Cover image for Making your CV talk 🤖 How to read audio stream on client using Next JS?
Nikola Mitic
Nikola Mitic

Posted on

1

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.

moving image of audio streaming component

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>
  );
};
Enter fullscreen mode Exit fullscreen mode

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

  1. X
  2. Linkedin
  3. nikola.mitic.dev@gmail.com

Postgres on Neon - Get the Free Plan

No credit card required. The database you love, on a serverless platform designed to help you build faster.

Get Postgres on Neon

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs