プラウザの音声認識機能とChatGPTのAPIを使用し音声で対話できる「Speach GPT」を作成しました。
語学学習をはじめとするリアルタイムでの会話練習や発音練習などにおすすめです。単純にChatGPTと日本語で楽しく対話することも可能。
ソースはGitHUBに公開しているのでダウンロードやリポジトリをフォークして自由にカスタマイズできます。
操作方法
SpeachGPTの会話方法、言語選択、ChatGPTの役割設定など各機能の使い方について解説します。
APIキーを設定する
「API Key」ボタンをクリックすると「ChatGPT APIキー」を設定するダイアログが表示されます。
ChatGPTより取得したAPIキーを設定し、「保存」ボタンをクリックするとブラウザの「localStorage」にAPIキーを保存します。
APIキーを削除する
キーを保存後、再度ダイアログを表示すると赤枠の「APIキーを削除」が表示されます。クリックすることでAPIキーを削除します。
会話をする
右下の「マイクアイコン」をクリックするとブラウザの「マイク許可」用のダイアログが表示されるので「許可する」をクリックします。
マイクが赤色に変更され音声認識が可能になります。
マイクに向かって話しかけると内容がテキスト欄に表示され、数秒後に自動で送信。会話が開始されます。
音声会話を終了する場合は再度「マイクアイコン」をクリックすると音声認識を終了します。
※テキスト欄はキー入力も可能です。キー入力した場合は「Enter」キーで確定します。
音声再生
ChatGPTの回答は自動で音声再生されます。
また画像内の赤枠をクリックすることで質問や回答の音声再生が何度でも可能です。
再生したいテキストをマウスで選択すると、選択した部分だけを音声再生することもできます。
オプションを設定する
メニューバー右のオプションアイコン（赤枠）をクリックするとオプションの設定が可能になります。
ChatGPTに役割を与えたり、読み上げる言語や音声、スピードなどの設定ができます。
役割設定
ロボットのアイコンをクリックするとダイアログが表示されて役割の設定が可能になります。
読み上げる言語
プルダウンより読み上げる言語を選択できます。上記画像の言語を設定できます。
読み上げる音声
選択した言語に対応した音声リストが表示されます。
読み上げる速さ
0.25〜2倍速まで設定可能です。
ミュート設定
「ミュートにする」にチェックすると音声再生が行われなくなり、通常のチャットと同様に文字だけを表示します。
マイクに話す言語
マイクに話す言語を設定できます。「日本語」が設定されている状態で「英語」で話しても「日本語」で認識が行われるので注意が必要です。
設定可能な言語は「読み上げる言語」と同様です。
話した内容を確定する秒数
マイクに話した内容を確定するまでの秒数を設定できます。
マイクを使用しない
「マイクを使用しない」をチェックすると「マイク」アイコンが非表示になり、キーボード入力のみ可能になります。
会話を削除
会話した内容はブラウザのデータベースに保存されます。このボタンをクリックすると画面、データベース上の会話内容が全て削除されます。
ヘルプ
「ヘルプアイコン」をクリックすると「SpeachGPTの使い方」と「ChatGPT APIキーの取得方法」についてのリンクボタンが表示されます。
クリックすると手順を解説したページに遷移します。
最後に
以上、SpeachGPTの使い方を解説しました。
今回はHTMLとCSS、JSのみを使用したペラページで、CSSはTailwindのUIコンポーネント「flowbite」を使用し実装しています。
以下GitHUBページより「OpenAI API」や「Web Speech API」などの使い方について何か参考になれば幸いです。
