客户端流式传输 | ElevenLabs Documentation

操作指南 · 假设你已完成语音转文本快速入门。

概述

ElevenLabs 实时语音转文本 API 使用 Scribe Realtime v2 模型，以超低延迟实时转录音频流。无论是在构建语音助手、转录服务，还是任何需要实时语音识别的应用，这个基于 WebSocket 的 API 都会在你说话时提供部分转录结果，并在语音片段完成后提供已提交的转录文本。

Scribe v3 Live 可在客户端实现实时音频转录，既可通过麦克风，也可手动分块处理音频。

客户端实现与服务端有以下不同：

需要一次性令牌：这是一种临时令牌，可在不暴露 API 密钥的情况下连接 API。
麦克风音频可直接传输到 API 进行转录，无需手动分块。

如需从 URL 流式传输音频，请参阅服务端流式传输指南。

快速入门

本指南假设你已设置 API 密钥。如果尚未完成，请先完成快速入门。

安装 SDK

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

创建令牌

使用客户端 SDK 前，需要创建一次性令牌。这是一种临时令牌，可在不暴露 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);
});

一次性令牌会在 15 分钟后自动过期。

开始转录会话

可通过麦克风转录，也可手动分块处理自己的音频。音频可以是文件或流。

如需了解 API 支持的完整参数和选项列表，请参阅 API 参考文档。

麦克风

手动分块音频

import { useScribe } from "@elevenlabs/react";
function MyComponent() {
  const scribe = useScribe({
    modelId: "scribe_v3_live",
    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 在服务端转录音频流。

转录文本与提交策略

控制提交转录文本的时机，以及如何处理部分结果。