 Next.jsとChatGPT、VOICEVOXを使用した音声チャットアプリを構築します。 VOICEVOXは、オープンソースのテキスト読み上げソフトウェアです。 複数のキャラクターが使用できますので、キャラクターを選択できるようにしています。 キャラクターを選択すると自己紹介の音声が流れます。 ChatGPTに質問した回答を、選択したキャラクターが読み上げます。 チャットの履歴を参照できるようにもしています。 ずんだもんを選択した時のみイラストが表示され、GSAPを使用してアニメーションをしています。 VOICEVOXを使用したアプリを作成したい方はぜひ参考にしてください。 

ChatGPTとVOICEVOXを組み合わせて音声チャットアプリを構築！あなたの選んだキャラが読み上げます！

はじめに

Next.js準備

App Directory

VOICEVOX ENGINE

キャラクター選択

音声再生

メッセージUI

ChatGPT

ボトムスクロール

ずんだもん表示

おわりに

nextjs

gsap

voicevox

chatgpt

はる@フルスタックチャンネル