客户端流式传输 | ElevenLabs Documentation

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

概述

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

可在客户端实现 Scribe v2 Realtime，通过麦克风或手动切分音频来实时转录。

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

需要单次使用令牌：这是一种临时令牌，可在不暴露 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_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 在服务器端转录音频流。

转录文本与确认策略

控制转录文本的确认时机及部分结果的处理方式。