如何用Gemini 3.1 Flash TTS从图片生成富有表现力的语音？2026年Firebase Cloud Functions与Angular集成教程

Google 发布了 Gemini 3.1 Flash TTS PreviewGoogle 发布的用于 AI 音频生成的最新模型，支持通过 Audio tags 表达情感、语速和风格。 模型，用于 Gemini API、Vertex AIA platform through which developers can access Gemini API services. 中的 Gemini 以及 Gemini AI Studio 中的 AI 音频生成。该模型引入了一项新的 Audio tags 功能，能够表现富有表现力的人类情感、节奏和风格。

本应用探索了 Firebase AI Logic，通过分析上传的图片来生成改进建议、描述、备选标签以及一个冷门知识。该冷门知识会被发送到 Firebase Cloud Function，用于使用 Gemini TTS 模型生成音频。Cloud Function 将流返回给 Angular 应用，后者将其转换为 Blob URL 对象。音频播放器将 URL 设置为源，用户可点击播放按钮来播放该流。

在本博客文章中，我将应用迁移至使用 Gemini 3.1 Flash TTS Preview 模型，并在 Angular 中创建一个信号表单，用于输入场景、情感和节奏。随后，Angular 应用将表单值和冷门知识一同发送给 Firebase Cloud Function，以使用 GenAI TypeScript SDK 生成富有表现力的语音。

Prerequisites

项目技术栈如下：

Angular 21本文使用的 Angular 框架版本，截至 2026 年 5 月的最新版本。： 截至 2026 年 5 月的最新版本。

Node.js LTS： 截至 2026 年 5 月的 LTS 版本。

Firebase Remote Config： 用于管理动态参数。

Firebase Cloud FunctionsFirebase 提供的无服务器计算服务，用于在后端执行代码，此处用于调用 Gemini TTS 模型生成音频。： 用于在前端调用时生成富有表现力的人声。

Firebase Local Emulator SuiteFirebase 本地模拟器，用于在开发环境中测试云函数和存储，地址为 http://localhost:5001。： 用于在本地 http://localhost:5001 测试函数。

Vertex AI 中的 Gemini： 用于生成视频并将其存储在 Firebase Cloud Storage 中。

公开的 Google AI Studio API 在我所在的地区（香港）受到限制。但 Vertex AI（Google Cloud）提供了企业级访问，在此处运行稳定，因此我在此演示中选择使用 Vertex AI。

Setting Up the Project

首先，全局安装 Firebase CLI：

npm i -g firebase-tools

登出并重新登录，以确保正确的身份验证：

firebase logout
firebase login

使用所需服务初始化 Firebase：

firebase init

如果你有现有项目或多个项目，可以在命令行指定项目 ID：

firebase init --project <PROJECT_ID>

无论哪种情况，Firebase CLI 都会自动安装 firebase-admin 和 firebase-functions 依赖。完成设置步骤后，Firebase 工具会生成函数模拟器、函数、存储规则文件、远程配置模板以及诸如 .firebaserc 和 firebase.json 的配置文件。

Angular Dependencies

Angular 应用需要 firebase 依赖来初始化 Firebase 应用、加载远程配置并调用 Firebase Cloud Functions 生成视频。

npm i firebase

Firebase Dependencies

安装以下依赖以访问 Vertex AI 中的 Gemini：

npm i @cfworker/json-schema @google/genai @modelcontextprotocol/sdk

@google/genai 依赖于 @cfworker/json-schema 和 @modelcontextprotocol/sdk。缺少这些依赖，Cloud Functions 将无法启动。

项目配置完成后，我们来看看前端和后端是如何通信的。

Architecture

用户在 Angular 应用中上传图片，并提示 Gemini 3.1 Flash Lite Preview 模型生成若干改进建议、描述和备选标签。用户还使用同一模型和 Google 搜索工具来查找与该图片相关的冷门知识。

用户在实验性的信号表单中输入场景、情感和节奏。当用户点击生成音频按钮时，Angular 应用将表单值和冷门知识发送给 Firebase Cloud Function，以使用 GenAI TypeScript SDK 和 Gemini 3.1 Flash TTS Preview 模型生成富有表现力的语音。

Limitations of Gemini 3.1 Flash TTS Preview Model

该模型只能接受文本输入并生成音频输出。

上下文窗口为 32K token。

TTS 不支持流式传输。

支持的语言可在官方文档中找到。我的母语粤语目前不受支持。

Firebase Integration

1. Configure Environment Variables

在 Firebase 项目中定义环境变量，可确保函数知道 Google Cloud 项目的区域、Firebase Cloud Function 的位置以及所需的 TTS 模型。

.env.example

GOOGLE_CLOUD_LOCATION="global"
GOOGLE_FUNCTION_LOCATION="asia-east2"
GEMINI_TTS_MODEL_NAME="gemini-3.1-flash-tts-preview"
WHITELIST="http://localhost:4200"
REFERER="http://localhost:4200/"

http://localhost:4200 是我本地 Angular 应用的主机和端口号。

2. Validating Environment Variables

在 Cloud Function 进行任何 AI 调用之前，确保所有必需的环境变量都存在是至关重要的。我实现了一个 AUDIO_CONFIG IIFE（立即执行函数表达式），用于验证 TTS 模型名称、Google Cloud Project ID 和位置等环境变量。

import logger from "firebase-functions/logger";

export function validate(value: string | undefined, fieldName: string, missingKeys: string[]) {
    const err = `${fieldName} is missing.`;
    if (!value) {
        logger.error(err);
        missingKeys.push(fieldName);
        return "";
    }
    return value;
}

export const AUDIO_CONFIG = (() => {
    logger.info("AUDIO_CONFIG initialization: Loading environment variables and validating configuration...");

    const env = process.env;

    const missingKeys: string[] = [];
    const location = validate(env.GOOGLE_CLOUD_LOCATION, "Vertex Location", missingKeys);
    const model = validate(env.GEMINI_TTS_MODEL_NAME, "Gemini TTS Model Name", missingKeys);
    const project = validate(env.GCLOUD_PROJECT, "Google Cloud Project", missingKeys);

    if (missingKeys.length > 0) {
        throw new HttpsError("failed-precondition", `Missing environment variables: ${missingKeys.join(", ")}`);
    }

    return {
        genAIOptions: {
            project,
            location,
            vertexai: true,
        },
        model,
    };
})();

截至 2026 年 5 月，我正在使用 Node 24。从 Node 20 开始，我们可以使用内置的 process.loadEnvFile 函数，从 .env 文件中加载环境变量。

在 env.ts 中，try-catch 块尝试从 .env 文件加载环境变量。

try {
    process.loadEnvFile();
} catch {
    // Ignore error if .env file is not found (e.g., in production where env vars are set by the platform)
}

常见问题（FAQ）

如何将Gemini 3.1 Flash TTS Preview集成到Firebase Cloud Functions？

在Firebase Cloud Functions中使用GenAI TypeScript SDK调用Gemini TTS模型。将场景、情感、节奏等参数通过函数传递，模型返回音频流，前端接收后转换为Blob URL播放。

Angular中如何使用Gemini TTS生成音频？

Angular创建信号表单输入场景、情感和节奏，将表单值与冷门知识发送至Firebase Cloud Function。函数调用Gemini TTS模型返回音频流，Angular转换为Blob URL供音频播放器播放。

Gemini 3.1 Flash TTS Preview模型有哪些限制？

该模型的限制包括：公共Google AI Studio API在某些区域受限（如香港），需使用Vertex AI企业级访问；模型支持情感、节奏等标签，但生成质量和延迟可能受输入影响。