Zenn
🎙️

Rust & Wasm から Gemini APIを使う(マイク付き)

に公開
Rust
WebAssembly
tech

はじめに

前回、GeminiAPIを使ったミニゲームを作成してみましたが、生成AIをもっと活用するには、マイクから音声の取り込みができた方が良いと考え、ブラウザーのマイク機能を使った音声入力機能を追加してみました。

対象のバージョン

  • Rust 2024 Edition
  • rustc 1.83.0
  • cargo 1.80.1
  • rustup 1.27.1
  • pnpm 9.12.3

Rust&Wasm サンプル

Play in browser
サンプル

※サンプルを動作するためには、最初にGeminiAPIキーの入力が必要です。
※入力されたGeminiAPIキーは、安全のためcookie等に保存していません。そのため、毎回入力が必要になります。😢
※画面をタップすると、マイクが有効になります。テキスト欄に英語を入力する代わりに、マイクを使って英語を入力することができます。 😄

https://github.com/myurioka/adventure

音声入力について

これまでの"HTTP通信"、"マウス入力"と同じく、ブラウザー提供の "WebkitSpeechRecognition"APIを使って、以下の流れでマイクの音声を取り込んでいます。

  1. "マイク"からの入力開始と終了時に呼び出される関数(Closure)をそれぞれ用意します。

  2. マイクからの音声入力を開始をブラウザーにリクエストします。

    ref_recognition.borrow_mut().add_event_listener("start", &on_start);

  3. 音声入力が完了のイベントを受け取るように、リスナーを設定します。

     ref_recognition_cloned.borrow_mut().add_event_listener("end", &on_end);

  4. 音声入力後の関数(CLosure)では、渡ってくる文字配列の内、最後の要素をRust文字列とし格納し、INPUT_TEXTにセットします。

  5. INPUT_TEXTの文字列は、<Enterキー>のイベントで、GeminiにPOSTされます。👍

  6. ブラウザーに、GeminiAPIへのPOSTをリクエストします。👍

Discussion