观看成人欧美日韩国产,办公室国产a国产片免,亚洲亚洲人成网站77777

Web Speech API是一種網頁瀏覽器接口，它使網頁應用程序能夠在其操作中使用聲音作為數據。借助這一接口，網頁應用能夠將音頻輸入中的語音內容進行轉錄，同時也能將文本轉化為語音。

本指南將向您展示如何構建一個全棧網頁應用程序，該應用程序能夠：

接收音頻輸入并將其中的語音內容進行轉錄
將轉錄后的結果發送給人工智能助手

您最終構建的應用程序將是下面圖片中所示的人工智能聊天應用中“使用語音”功能的簡化版本：

人工智能聊天應用中的‘使用語音’功能

通過跟隨本文進行練習，您將學會如何：

使用SpeechRecognition接口構建前端應用程序，以接收語音輸入并進行轉錄
構建后端應用程序，讓它能夠調用您選擇的人工智能助手并將回復發送給用戶

此外，您還可以學習如何使用Firebase來托管前端應用，以及使用Google Cloud Run來部署后端應用。

先決條件

本指南假定您已經掌握了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助手的回復會被發送回前端，并在用戶界面上顯示出來，如下圖所示：

使用Web Speech API的應用程序中AI助手的用戶界面

如何構建這個應用程序

首先，你需要構建一個Node.js后端應用程序，該程序需要完成以下功能：

從前端接收文本指令
將這些指令發送給AI助手并獲取回復
將AI助手的回復返回給前端

接下來，你需要構建前端部分，使其能夠完成以下操作：

接收用戶的語音指令，將其轉錄成文本并顯示出來
將轉錄結果發送到后端
接收后端的回復，對其進行處理并顯示在界面上

可選地，你可以將前端部署到Firebase上，后將端部分布到Google Cloud Run中，這樣整個應用程序就能對外公開使用了。

使用Node.js創建后端應用程序

在本節中你將要構建的后端應用程序會接收來自客戶端的文本指令，并利用這些指令來觸發AI助手進行響應。在收到AI助手的回復后，它會將這個回復發送回客戶端。

本指南中我們會使用Gemini作為示例，但你也可以選擇任何其他你喜歡的AI助手。

為后端應用程序創建一個文件夾，并給它起個名字，比如“server”。
在終端中進入項目文件夾，運行npm init命令，按照提示填寫相關信息，從而生成package.json文件。
在項目的根目錄下創建一個名為index.js的文件。

你的項目文件夾應該具有如下結構：

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

package.json文件中，main、type和scripts.start的設置應該如下：

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

將以下代碼復制并粘貼到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頁面鏈接：

請更新 `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 安裝并啟動項目？
│  是

在您的代碼編輯器中打開新建的項目，然后進行以下修改：

將 `index.html` 文件中的內容替換為下面的代碼片段：

<!DOCTYPE html>
<html lang="en">
  
    使用 Web Speech Recognition API 來操作 Prompt AI
  
  
    
        使用 Web Speech Recognition API 來操作 Prompt AI
        
      錄制提示語
      
    
    









感谢您访问我们的网站，您可能还对以下资源感兴趣：
国产精品虐乳在线播放_偷拍区小说区综合区_又黄又爽旳成人免费视频_欧美老妇乱人伦视频在线_国产做爰xxxⅹ久久久精华液_一级欧美片亚洲精品_另类小说亚洲综合影音先锋_国产性色的免费视频网站

国产精品虐乳在线播放_偷拍区小说区综合区_又黄又爽旳成人免费视频_欧美老妇乱人伦视频在线_国产做爰xxxⅹ久久久精华液_一级欧美片亚洲精品_另类小说亚洲综合影音先锋_国产性色的免费视频网站

如何使用網絡語音API構建一個基于語音控制的人工智能應用程序

目錄