【WhisperAPIを使って音声をテキスト化】VueとFlaskで音声入力デモを作成しよう！

こんにちは！今回は、WhisperAPI を使って音声をテキスト化する方法を紹介します。WhisperAPIはOpenAIが発表した音声認識モデルで、API経由で利用できます。特に日本語の音声認識でも高い精度を誇ります。今回は、このAPIを使用して、Vue + Flask 環境で音声をテキストに変換するデモを作成します。

1. WhisperAPIとは？
2. マイクから音声を取得してMP4形式に変換
1. 音声入力のUIを作成
2. 録音の開始と停止のメソッド
3. サーバーに音声データを送信
1. Flaskサーバーにエンドポイントを作成
2. VueからAPIにリクエストを送信
4. WhisperAPIを使って音声をテキスト化
5. まとめ
参考文献

1. WhisperAPIとは？

WhisperAPI は、OpenAI社から提供されている音声認識モデルです。これを使用することで、音声を簡単にテキスト化できます。GitHubで無料で公開されており、API経由で音声データを送信すると、テキスト化されたデータが返されます。

WhisperAPIは、非常に高精度な音声認識を提供しており、特に日本語においても非常に優れた認識精度を持っています。今回は、このAPIを使って、VueとFlaskを連携させて音声→テキスト変換を行う方法を説明します。

2. マイクから音声を取得してMP4形式に変換

まずは、Vue.js を使って、ブラウザでマイクから音声を取得し、MP4形式の音声データを作成します。

音声入力のUIを作成

以下のHTML部分を使って、録音開始ボタンと停止ボタンを作成します。

<h1>音声入力デモ (LIFF WebRTC)</h1>
<button @click="startRecording" :disabled="isRecording">
  {{ isRecording ? "録音中..." : "録音を開始" }}
</button>
<button @click="stopRecording" :disabled="!isRecording">録音を停止</button>
<audio ref="audioPlayer" controls v-if="audioUrl"></audio>

録音の開始と停止のメソッド

Vueのメソッドを使って、録音を開始し、停止する処理を追加します。

methods: {
  async startRecording() {
    try {
      // マイクのストリームを取得
      const stream = await navigator.mediaDevices.getUserMedia({
        audio: true,
      });
      this.userMedia = stream;

      // MediaRecorderの初期化
      this.mediaRecorder = new MediaRecorder(stream);

      // 録音開始
      this.mediaRecorder.start();
      this.isRecording = true;
      this.audioChunks = [];

      // 音声データをチャンクとして収集
      this.mediaRecorder.ondataavailable = (event) => {
        this.audioChunks.push(event.data);
      };

      // 録音終了時の処理
      this.mediaRecorder.onstop = () => {
        const audioBlob = new Blob(this.audioChunks, { type: "audio/mp4" });
        const audio = new Audio();
        audio.src = URL.createObjectURL(audioBlob);
        audio.play().then(() => {
          console.log("音声の再生を開始しました。");
        }).catch((error) => {
          console.error("音声再生エラー:", error);
          this.errorMessage = "音声の再生中にエラーが発生しました。";
        });
      };
    } catch (error) {
      console.error("マイクアクセスエラー:", error);
      this.errorMessage = "マイクのアクセスに失敗しました。ブラウザの設定を確認してください。" + error;
    }
  },

  stopRecording() {
    if (this.mediaRecorder) {
      this.mediaRecorder.stop();
      this.isRecording = false;

      // ストリームの停止
      if (this.userMedia) {
        this.userMedia.getTracks().forEach((track) => track.stop());
        this.userMedia = null;
      }
    }
  }
}

このコードでは、startRecording メソッドでマイクから音声を取得し、stopRecording で録音を停止します。録音した音声は、audio 要素を使って再生できます。

3. サーバーに音声データを送信

次に、録音した音声データを Flaskサーバー に送信し、WhisperAPIでテキスト化を行います。

Flaskサーバーにエンドポイントを作成

Flask側で、音声データを受け取るためのエンドポイントを作成します。

@main.route('/api/sendvoice', methods=["POST"])
def requestWhisperAPI():
    data = request.json
    # データをログに出力
    print("受け取ったデータ:", data)
    # レスポンスを返す
    return jsonify({
        "message": "データを受け取りました！",
        "received": data
    }), 200

ひとまず音声データを受け取るだけのAPIを作成しました。

VueからAPIにリクエストを送信

Vue側では、録音した音声データをFlaskサーバーに送信します。音声データは、POST リクエストを使って送信します。

async requestWhisperAPI(blob) {
  try {
    const data = { voiceMessage: blob };
    const res = await fetch("http://localhost:5000/api/sendvoice", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    });

    if (!res.ok) {
      throw new Error(`HTTPエラー: ${res.status}`);
    }

    // サーバーからのレスポンスをJSONとして取得
    const responseData = await res.json();
    this.transcription = responseData.message; // レスポンスを表示用に保存
  } catch (error) {
    console.error("POSTリクエストエラー:", error);
    this.transcription = "エラーが発生しました: " + error.message;
  }
}