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❤️
Top comments (0)