クライアントサイドストリーミング

ハウツーガイド · スピーチtoテキストのクイックスタートを完了していることを前提としています。

概要

ElevenLabsリアルタイムスピーチtoテキストAPIでは、Scribe Realtime v2モデルを使用して、超低レイテンシーでオーディオストリームをリアルタイムに文字起こしできます。音声アシスタント、文字起こしサービス、ライブ音声認識を必要とするあらゆるアプリケーションの構築に対応するこのWebSocketベースのAPIは、発話中には部分的な文字起こしを、発話セグメントの完了時には確定済みの文字起こしを提供します。

Scribe v2 Realtimeは、マイク経由またはオーディオを手動でチャンク分割することで、クライアント側に実装してオーディオをリアルタイムに文字起こしできます。

クライアント側の実装は、サーバー側と以下の点で異なります。

1回限りのトークンが必要です。この一時トークンを使用すると、APIキーを公開せずにAPIへ接続できます。
マイクからのオーディオは、手動でチャンク分割することなく、文字起こしのために直接APIへ送信できます。

URLからオーディオをストリーミングする場合は、サーバー側ストリーミングガイドを参照してください。

クイックスタート

このガイドは、APIキーを設定済みであることを前提としています。まだの場合は、先にクイックスタートを完了してください。

SDKをインストール

npm install @elevenlabs/react @elevenlabs/elevenlabs-js

トークンを作成

クライアント側SDKを使用するには、1回限りのトークンを作成する必要があります。この一時トークンを使用すると、APIキーを公開せずにAPIへ接続できます。これはサーバー側でElevenLabs APIを介して作成できます。

APIキーをクライアントに公開しないでください。

// Node.js server
import { ElevenLabsClient } from "@elevenlabs/elevenlabs-js";
const elevenlabs = new ElevenLabsClient({
  apiKey: process.env.ELEVENLABS_API_KEY,
});
app.get("/scribe-token", yourAuthMiddleware, async (req, res) => {
  const token = await elevenlabs.tokens.singleUse.create("realtime_scribe");
  res.json(token);
});

1回限りのトークンは、15分後に自動的に期限切れになります。

文字起こしセッションを開始

文字起こしは、マイク経由または独自のオーディオを手動でチャンク分割して行えます。独自のオーディオには、ファイルまたはストリームを使用できます。

APIでサポートされているパラメータとオプションの一覧については、APIリファレンスを参照してください。

マイク

オーディオの手動チャンク分割

import { useScribe } from "@elevenlabs/react";
function MyComponent() {
  const scribe = useScribe({
    modelId: "scribe_v2_realtime",
    onPartialTranscript: (data) => {
      console.log("Partial:", data.text);
    },
    onCommittedTranscript: (data) => {
      console.log("Committed:", data.text);
    },
    onCommittedTranscriptWithTimestamps: (data) => {
      console.log("Committed with timestamps:", data.text);
      console.log("Timestamps:", data.words);
    },
  });
  const handleStart = async () => {
    // Fetch a single use token from the server
    const token = await fetchTokenFromServer();
    await scribe.connect({
      token,
      microphone: {
        echoCancellation: true,
        noiseSuppression: true,
      },
    });
  };
  return (
    <div>
      <button onClick={handleStart} disabled={scribe.isConnected}>
        Start Recording
      </button>
      <button onClick={scribe.disconnect} disabled={!scribe.isConnected}>
        Stop
      </button>
      {scribe.partialTranscript && <p>Live: {scribe.partialTranscript}</p>}
      <div>
        {scribe.committedTranscripts.map((t) => (
          <p key={t.id}>{t.text}</p>
        ))}
      </div>
    </div>
  );
}

次のステップ

サーバー側ストリーミング

同じWebSocket APIで、サーバー側のオーディオストリームを文字起こしします。

文字起こしとコミット戦略

文字起こしを確定するタイミングと、部分的な結果の処理方法を制御します。