Web Speech API是一种网页浏览器接口，它使网页应用程序能够在其操作中使用声音作为数据。借助这一接口，网页应用能够将音频输入中的语音内容进行转录，同时也能将文本转化为语音。

本指南将向您展示如何构建一个全栈网页应用程序，该应用程序能够：

• 接收音频输入并将其中的语音内容进行转录

• 将转录后的结果发送给人工智能助手

您最终构建的应用程序将是下面图片中所示的人工智能聊天应用中“使用语音”功能的简化版本：

通过跟随本文进行练习，您将学会如何：

• 使用SpeechRecognition接口构建前端应用程序，以接收语音输入并进行转录

• 构建后端应用程序，让它能够调用您选择的人工智能助手并将回复发送给用户

此外，您还可以学习如何使用Firebase来托管前端应用，以及使用Google Cloud Run来部署后端应用。

目录

• 先决条件

• Web Speech API简介

  • SpeechRecognition组件的工作原理

• 应用程序的整体运作方式

• 如何构建这个应用程序

  • 使用Node.js创建后端应用

  • 将人工智能助手集成到Node.js应用中

  • 使用Vite构建前端应用

• 在本地测试应用程序

• 使用Google Cloud Run部署后端应用

• 使用Firebase部署前端应用

• 连接已部署的应用程序

• 总结

先决条件

本指南假定您已经掌握了HTML、CSS以及浏览器中的JavaScript基础知识。虽然对Node.js有基本了解会更有帮助，但并非必需。

此外，您还需要具备以下条件：

• Google Chrome浏览器（至少需安装33版本）以及一个可正常使用的音频输入设备

• 您的计算机上已安装Node.js及npm工具

• 您选择的任何AI助手提供的API密钥

• 如果您打算部署应用程序，还需要拥有Google Cloud账户和Firebase账户

Web Speech API简介

Web Speech API使应用程序能够将音频输入中的语音内容进行转录，同时也能将文本转换为音频。该API由两个组件构成：

• SpeechRecognition组件：用于接收音频输入，识别其中的语音并对其进行转录

• SpeechSynthesis组件：负责将文本转换为语音

在本指南中，您将会使用SpeechRecognition组件。

SpeechRecognition组件的工作原理

SpeechRecognition组件的工作是通过在代码中创建一个JavaScript对象来实现的。

const recognition = new SpeechRecognition();

recognition对象提供了多个事件监听器，用于响应音频输入。例如，当系统首次检测到声音时，audiostart事件会被触发，此时控制台会显示“audio detected”这一信息。

recognition.addEventListener("audiostart", function(event){
  console.log("audio detected")
}

当系统首次从音频数据中识别出语音内容时，speechstart事件也会被触发。

SpeechRecognition对象还允许用户配置语音识别的具体行为。例如，它有一个名为lang的属性，用于指定识别语言；该属性的默认值通常是HTML页面中的lang属性值或浏览器设置的语言。此外，还有一个布尔型属性interimResults，如果将其设置为true，那么系统就可以在音频输入尚未结束时就开始返回转录结果。

麦克风捕获的音频数据会由识别引擎进行处理，对于Google Chrome来说，这个处理过程可能发生在远程服务器上；而对于Firefox而言，识别引擎则是内嵌在浏览器中的。

在完成处理后，识别引擎会返回一个结果，这个结果就是语音中被识别出来的单词或短语列表。

列表中的每条转录内容都包含两个属性：confidence，表示其准确性的数值估计，范围从0（低）到1（高）；以及transcript，即被识别出的全部或部分语音文本。

应用程序的工作原理

为了让SpeechRecognition实例能够捕获音频，它需要访问麦克风。浏览器会请求使用麦克风的权限，如果获得许可，该应用就会利用麦克风来采集音频数据。

该实例捕获到的音频数据会经过识别引擎的处理，从而生成相应的结果或转录文本。那些置信度较高的结果会被合并起来，然后通过API请求发送到后端。

后端接收到这些转录文本后，会用它们来触发AI助手进行响应。AI助手的回复会被发送回前端，并在用户界面上显示出来，如下图所示：

如何构建这个应用程序

首先，你需要构建一个Node.js后端应用程序，该程序需要完成以下功能：

• 从前端接收文本指令

• 将这些指令发送给AI助手并获取回复

• 将AI助手的回复返回给前端

接下来，你需要构建前端部分，使其能够完成以下操作：

• 接收用户的语音指令，将其转录成文本并显示出来

• 将转录结果发送到后端

• 接收后端的回复，对其进行处理并显示在界面上

可选地，你可以将前端部署到Firebase上，后将端部分布到Google Cloud Run中，这样整个应用程序就能对外公开使用了。

使用Node.js创建后端应用程序

在本节中你将要构建的后端应用程序会接收来自客户端的文本指令，并利用这些指令来触发AI助手进行响应。在收到AI助手的回复后，它会将这个回复发送回客户端。

本指南中我们会使用Gemini作为示例，但你也可以选择任何其他你喜欢的AI助手。

1. 为后端应用程序创建一个文件夹，并给它起个名字，比如“server”。

2. 在终端中进入项目文件夹，运行npm init命令，按照提示填写相关信息，从而生成package.json文件。

3. 在项目的根目录下创建一个名为index.js的文件。

你的项目文件夹应该具有如下结构：

├── index.js
├── package.json

package.json文件中，main、type和scripts.start的设置应该如下：

 { 
    "main": "index.js", 
    "type": "module", 
    "scripts": { 
       "start": "node index.js" 
    }, 
}  

1. 将以下代码复制并粘贴到index.js文件中，以设置服务器：

import http from "node:http";

async function parseRequestBody(req) { 
    return new Promise((resolve, reject) => { 
        let data = ""; 
        req.on("data", (chunk) => (data += chunk)); 
        req.on("end", () => resolve(JSON.parse(data))); 
        req.on("error", reject); 
    }); 
}

const server = http.createServer(async function (req, res) { 
    switch (req.method) { 
        case "POST":
          return res.end("POST request received");
        default:
          return res.end("non-POST request received");
    }
})

const port = Number(process.env.PORT) || 8000; 
server.listen(port, function () { 
    console.log(server running on port ${port}); 
});

在上面的代码中，我们从Node.js中导入了http模块。parseRequestBody函数用于将HTTP请求的请求体数据转换为JavaScript对象。

我们使用http.createServer方法创建了服务器，并将Access-Control-Allow-Origin头设置为*，这样任何客户端发送的请求都可以被服务器接收。对于POST请求，服务器会返回“POST request received”；对于其他类型的请求，则会返回“non-POST request received”。默认情况下，服务器会监听8000端口，除非有定义PORT环境变量。

运行npm run start即可启动服务器。要确认服务器是否正在运行，请在终端中执行以下命令：

# 对于Linux/Mac系统，使用以下命令：
curl -X POST -H "Content-Type: application/json" -d '{"prompt":"hello"}' http://localhost:8000

# 对于Windows系统，使用以下命令：
curl.exe -X POST -H "Content-Type: application/json" -d '{"prompt":"hello"}' http://localhost:8000

服务器会返回“POST request received”作为响应。

将AI助手集成到Node.js应用程序中

在本节中，你将把AI助手集成到后端应用程序中，通过前端发送的数据来触发它的功能，并将其响应结果返回给客户端。同样，这里我们也会使用Gemini作为示例。

请访问你所选择的AI助手的npm页面，了解如何安装和配置它。以下是一些最受欢迎的AI助手的npm页面链接：

• Anthropic AI

• Google Gemini

• OpenAI

请更新 `index.js` 文件，使用以下代码片段来配置 AI 助手的相关设置：

import http from "node:http";
import { GoogleGenAI } from "@google/genai"; 

const ai = new GoogleGenAI({ apiKey: "" });

async function parseRequestBody(req) { /* 简化了代码 */ }

const server = http.createServer(async function (req, res) {
    res.setHeader("Access-Control-Allow-Origin", "*");

    switch (req.method) { 
        case "POST":
          const body = await parseRequestBody(req);
          const response = await ai.models.generateContent({
            model: "gemini-2.5-flash", // 或您使用的其他模型
            contents: body.prompt,
         });

         return res.end(response.text);

        default:
          return res.end("收到的是非 POST 请求");
    }
}
/* 简化了之前的代码 */

`GEMINI_API_KEY` 是从环境变量中获取的，然后作为 `apiKey` 传递给 `GoogleGenAI`，从而初始化 AI 助手。

POST 请求的请求体会被解析成 JavaScript 对象，然后 `body.prompt` 会被传递给 `ai.models.generateContent` 方法，以便向 AI 助手发送提示信息。响应中以 Markdown 格式呈现的 `text` 属性会最终被返回给客户端。

请重启服务器，然后使用以下命令通过 curl 发送 API 请求来测试当前的配置：

# 对于 Linux/Mac:

curl -X POST -H "Content-Type: application/json" -d '{"prompt":"hello"}' http://localhost:8000

# 对于 Windows:

curl.exe -X POST -H "Content-Type: application/json" -d '{"prompt":"hello"}' http://localhost:8000

您将会收到以 Markdown 格式呈现的 AI 文本回复。

使用 Vite 创建前端应用

Vite 是一种构建工具，它能够为应用程序的开发提供更快、更流畅的开发体验。您将使用 Vite 来创建前端应用，并将其与上一节中提到的后端应用连接起来。

在另一个文件夹中，运行 `npm create vite@latest` 命令来使用 Vite 创建一个新的项目，然后按照提示完成相关设置：

npm create vite@latest

需要安装以下包：
create-vite@8.1.0
是否继续？(y) y

> npx create-vite

◇ 项目名称：
│  [您的前端应用名称] 例如：prompt-ai-with-speech-frontend
│
◇ 选择框架：
│  Vanilla
│
◇ 选择开发语言：
│  JavaScript
│
◇ 是否使用 rolldown-vite（实验性功能）？:
│  不使用
│
◇ 是否现在就用 npm 安装并启动项目？
│  是

在您的代码编辑器中打开新建的项目，然后进行以下修改：

1. 将 `index.html` 文件中的内容替换为下面的代码片段：

<!DOCTYPE html>
<html lang="en">
  
    使用 Web Speech Recognition API 来操作 Prompt AI
  
  
    

        
使用 Web Speech Recognition API 来操作 Prompt AI
        

      
录制提示语