如何用Gemini 3.1 Flash TTS从图片生成富有表现力的语音?2026年Firebase Cloud Functions与Angular集成教程
AIAI Summary (BLUF)
This article demonstrates how to integrate Gemini 3.1 Flash TTS Preview model with Firebase Cloud Functions and Angular to generate expressive audio from image content. It covers setup, architecture,
Google released the Gemini 3.1 Flash TTS PreviewGoogle 发布的用于 AI 音频生成的最新模型,支持通过 Audio tags 表达情感、语速和风格。 model for AI audio generation in the Gemini API, Gemini in Vertex AIA platform through which developers can access Gemini API services., and Gemini AI Studio. This model introduces a new Audio tags feature to exhibit expressive human emotion, pace, and style.
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功能,能够表现富有表现力的人类情感、节奏和风格。
This application explores Firebase AI Logic to analyze an uploaded image to generate recommendations, description, alternative tags, and an obscure fact. The obscure fact is sent to a Firebase Cloud Function to generate an audio using a Gemini TTS model. The Cloud Function returns the stream to an Angular application that converts it to a Blob URL object. An audio player sets the URL to the source that users can click the Play button to play the stream.
本应用探索了 Firebase AI Logic,通过分析上传的图片来生成改进建议、描述、备选标签以及一个冷门知识。该冷门知识会被发送到 Firebase Cloud Function,用于使用 Gemini TTS 模型生成音频。Cloud Function 将流返回给 Angular 应用,后者将其转换为 Blob URL 对象。音频播放器将 URL 设置为源,用户可点击播放按钮来播放该流。
In this blog post, I migrate my application to use the Gemini 3.1 Flash TTS PreviewGoogle 发布的用于 AI 音频生成的最新模型,支持通过 Audio tags 表达情感、语速和风格。 model and create a signal form in Angular to input a scene, emotion, and pace. Then, the Angular application provides the form values and the obscure fact to the Firebase Cloud Function to generate an expressive voice using the GenAI TypeScript SDK.
在本博客文章中,我将应用迁移至使用 Gemini 3.1 Flash TTS PreviewGoogle 发布的用于 AI 音频生成的最新模型,支持通过 Audio tags 表达情感、语速和风格。 模型,并在 Angular 中创建一个信号表单,用于输入场景、情感和节奏。随后,Angular 应用将表单值和冷门知识一同发送给 Firebase Cloud Function,以使用 GenAI TypeScript SDK 生成富有表现力的语音。
Prerequisites
The technical stack of the project:
项目技术栈如下:
Angular 21本文使用的 Angular 框架版本,截至 2026 年 5 月的最新版本。: The latest version as of May 2026.
Angular 21本文使用的 Angular 框架版本,截至 2026 年 5 月的最新版本。: 截至 2026 年 5 月的最新版本。
Node.js LTS: The LTS version as of May 2026.
Node.js LTS: 截至 2026 年 5 月的 LTS 版本。
Firebase Remote Config: To manage dynamic parameters.
Firebase Remote Config: 用于管理动态参数。
Firebase Cloud FunctionsFirebase 提供的无服务器计算服务,用于在后端执行代码,此处用于调用 Gemini TTS 模型生成音频。: To generate an expressive human voice when called by the frontend.
Firebase Cloud FunctionsFirebase 提供的无服务器计算服务,用于在后端执行代码,此处用于调用 Gemini TTS 模型生成音频。: 用于在前端调用时生成富有表现力的人声。
Firebase Local Emulator SuiteFirebase 本地模拟器,用于在开发环境中测试云函数和存储,地址为 http://localhost:5001。: To test the functions locally at
http://localhost:5001.Firebase Local Emulator SuiteFirebase 本地模拟器,用于在开发环境中测试云函数和存储,地址为 http://localhost:5001。: 用于在本地
http://localhost:5001测试函数。Gemini in Vertex AIA platform through which developers can access Gemini API services.: To generate videos and store them in Firebase Cloud Storage.
Vertex AIA platform through which developers can access Gemini API services. 中的 Gemini: 用于生成视频并将其存储在 Firebase Cloud Storage 中。
The public Google AI Studio API is restricted in my region (Hong Kong). However, Vertex AIA platform through which developers can access Gemini API services. (Google Cloud) offers enterprise access that works reliably here, so I chose Vertex AIA platform through which developers can access Gemini API services. for this demo.
公开的 Google AI Studio API 在我所在的地区(香港)受到限制。但 Vertex AIA platform through which developers can access Gemini API services.(Google Cloud)提供了企业级访问,在此处运行稳定,因此我在此演示中选择使用 Vertex AIA platform through which developers can access Gemini API services.。
Setting Up the Project
First, install the Firebase CLI globally:
首先,全局安装 Firebase CLI:
npm i -g firebase-tools
Log out and log back in to ensure proper authentication:
登出并重新登录,以确保正确的身份验证:
firebase logout
firebase login
Initialize Firebase with the required services:
使用所需服务初始化 Firebase:
firebase init
If you have an existing project or multiple projects, you can specify the project ID on the command line:
如果你有现有项目或多个项目,可以在命令行指定项目 ID:
firebase init --project <PROJECT_ID>
In both cases, the Firebase CLI automatically installs the firebase-admin and firebase-functions dependencies. After completing the setup steps, the Firebase tools generate the functions emulator, functions, a storage rules file, remote config templates, and configuration files such as .firebaserc and firebase.json.
无论哪种情况,Firebase CLI 都会自动安装
firebase-admin和firebase-functions依赖。完成设置步骤后,Firebase 工具会生成函数模拟器、函数、存储规则文件、远程配置模板以及诸如.firebaserc和firebase.json的配置文件。
Angular Dependencies
The Angular application requires the firebase dependency to initialize a Firebase app, load remote config, and invoke the Firebase Cloud FunctionsFirebase 提供的无服务器计算服务,用于在后端执行代码,此处用于调用 Gemini TTS 模型生成音频。 to generate videos.
Angular 应用需要
firebase依赖来初始化 Firebase 应用、加载远程配置并调用 Firebase Cloud FunctionsFirebase 提供的无服务器计算服务,用于在后端执行代码,此处用于调用 Gemini TTS 模型生成音频。 生成视频。
npm i firebase
Firebase Dependencies
Install the following dependencies to access Gemini in Vertex AIA platform through which developers can access Gemini API services.:
安装以下依赖以访问 Vertex AIA platform through which developers can access Gemini API services. 中的 Gemini:
npm i @cfworker/json-schema @google/genai @modelcontextprotocol/sdk
@google/genai depends on @cfworker/json-schema and @modelcontextprotocol/sdk. Without these, the Cloud Functions cannot start.
@google/genai依赖于@cfworker/json-schema和@modelcontextprotocol/sdk。缺少这些依赖,Cloud Functions 将无法启动。
With our project configured, let's look at how the frontend and backend communicate.
项目配置完成后,我们来看看前端和后端是如何通信的。
Architecture
A user uploads an image in an Angular application and prompts the Gemini 3.1 Flash Lite Preview model to generate a few recommendations for improving the image, a description, and alternative tags. The user also uses the same model and the Google Search tool to find an obscure fact related to the image.
用户在 Angular 应用中上传图片,并提示 Gemini 3.1 Flash Lite Preview 模型生成若干改进建议、描述和备选标签。用户还使用同一模型和 Google 搜索工具来查找与该图片相关的冷门知识。
A user inputs a scene, an emotion, and a pace in an experimental signal form. When a user clicks the generate audio button, the Angular application sends the form values and the obscure fact to the Firebase Cloud Function to generate an expressive voice using the GenAI TypeScript SDK and Gemini 3.1 Flash TTS PreviewGoogle 发布的用于 AI 音频生成的最新模型,支持通过 Audio tags 表达情感、语速和风格。 model.
用户在实验性的信号表单中输入场景、情感和节奏。当用户点击生成音频按钮时,Angular 应用将表单值和冷门知识发送给 Firebase Cloud Function,以使用 GenAI TypeScript SDK 和 Gemini 3.1 Flash TTS PreviewGoogle 发布的用于 AI 音频生成的最新模型,支持通过 Audio tags 表达情感、语速和风格。 模型生成富有表现力的语音。
Limitations of Gemini 3.1 Flash TTS PreviewGoogle 发布的用于 AI 音频生成的最新模型,支持通过 Audio tags 表达情感、语速和风格。 Model
The model can only accept text inputs and generate audio outputs.
该模型只能接受文本输入并生成音频输出。
The context window is 32K tokens.
上下文窗口为 32K token。
TTS does not support streaming.
TTS 不支持流式传输。
The supported languages can be found in the official documentation. My mother tongue, Cantonese, is currently unsupported.
支持的语言可在官方文档中找到。我的母语粤语目前不受支持。
Firebase Integration
1. Configure Environment Variables
Defining the environment variables in the Firebase project ensures the functions know the region of the Google Cloud project, the Firebase Cloud Function location, and the required TTS model.
在 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/"
| Variable | Description |
|---|---|
| GOOGLE_CLOUD_LOCATION | The region of the Google Cloud project. I chose global so that the Firebase project has access to the newest Gemini 3.1 Flash TTS previewGoogle 发布的用于 AI 音频生成的最新模型,支持通过 Audio tags 表达情感、语速和风格。 model. |
| GOOGLE_FUNCTION_LOCATION | The region of the Firebase Cloud FunctionsFirebase 提供的无服务器计算服务,用于在后端执行代码,此处用于调用 Gemini TTS 模型生成音频。. I chose asia-east2 because this is the region where I live. |
| WHITELIST | Requests must come from http://localhost:4200. |
| REFERER | Requests originate from http://localhost:4200/. |
变量 描述 GOOGLE_CLOUD_LOCATION Google Cloud 项目的区域。我选择了 global,以便 Firebase 项目可以访问最新的 Gemini 3.1 Flash TTS previewGoogle 发布的用于 AI 音频生成的最新模型,支持通过 Audio tags 表达情感、语速和风格。 模型。GOOGLE_FUNCTION_LOCATION Firebase Cloud FunctionsFirebase 提供的无服务器计算服务,用于在后端执行代码,此处用于调用 Gemini TTS 模型生成音频。 的区域。我选择了 asia-east2,这是我居住的地区。WHITELIST 请求必须来自 http://localhost:4200。REFERER 请求来源于 http://localhost:4200/。
http://localhost:4200 is the host and port number of my local Angular application.
http://localhost:4200是我本地 Angular 应用的主机和端口号。
2. Validating Environment Variables
Before the Cloud Function proceeds with any AI calls, it is critical to ensure that all necessary environment variables are present. I implemented an AUDIO_CONFIG IIFE (Immediately Invoked Function Expression) to validate environment variables like the TTS model name, Google Cloud Project ID, and location.
在 Cloud Function 进行任何 AI 调用之前,确保所有必需的环境变量都存在是至关重要的。我实现了一个
AUDIO_CONFIGIIFE(立即执行函数表达式),用于验证 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,
};
})();
I am using Node 24 as of May 2026. Since Node 20, we can use the built-in process.loadEnvFile function that loads environment variables from the .env file.
截至 2026 年 5 月,我正在使用 Node 24。从 Node 20 开始,我们可以使用内置的
process.loadEnvFile函数,从.env文件中加载环境变量。
In env.ts, the try-catch block attempts to load the environment variables from the .env file.
在
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 PreviewGoogle 发布的用于 AI 音频生成的最新模型,支持通过 Audio tags 表达情感、语速和风格。集成到Firebase Cloud FunctionsFirebase 提供的无服务器计算服务,用于在后端执行代码,此处用于调用 Gemini TTS 模型生成音频。?
在Firebase Cloud FunctionsFirebase 提供的无服务器计算服务,用于在后端执行代码,此处用于调用 Gemini TTS 模型生成音频。中使用GenAI TypeScript SDK调用Gemini TTS模型。将场景、情感、节奏等参数通过函数传递,模型返回音频流,前端接收后转换为Blob URL播放。
Angular中如何使用Gemini TTS生成音频?
Angular创建信号表单输入场景、情感和节奏,将表单值与冷门知识发送至Firebase Cloud Function。函数调用Gemini TTS模型返回音频流,Angular转换为Blob URL供音频播放器播放。
Gemini 3.1 Flash TTS PreviewGoogle 发布的用于 AI 音频生成的最新模型,支持通过 Audio tags 表达情感、语速和风格。模型有哪些限制?
该模型的限制包括:公共Google AI Studio API在某些区域受限(如香港),需使用Vertex AIA platform through which developers can access Gemini API services.企业级访问;模型支持情感、节奏等标签,但生成质量和延迟可能受输入影响。
版权与免责声明:本文仅用于信息分享与交流,不构成任何形式的法律、投资、医疗或其他专业建议,也不构成对任何结果的承诺或保证。
文中提及的商标、品牌、Logo、产品名称及相关图片/素材,其权利归各自合法权利人所有。本站内容可能基于公开资料整理,亦可能使用 AI 辅助生成或润色;我们尽力确保准确与合规,但不保证完整性、时效性与适用性,请读者自行甄别并以官方信息为准。
若本文内容或素材涉嫌侵权、隐私不当或存在错误,请相关权利人/当事人联系本站,我们将及时核实并采取删除、修正或下架等处理措施。 也请勿在评论或联系信息中提交身份证号、手机号、住址等个人敏感信息。