GSP125

總覽

開發人員可透過 Google Cloud Speech 串流 API，即時將語音內容轉換為文字。只要將 API 與 JavaScript 的 Web Audio API 和 Websockets 搭配使用，Java Servlet 就能接受網頁串流語音並提供文字轉錄稿，讓任何網頁都能用語音提供額外的使用者介面。

本實驗室分為多個部分，每個部分都會介紹最終網路應用程式的元件。

您建立的網頁應用程式會從用戶端麥克風擷取音訊資料，再串流傳輸至 Java Servlet。接著，Java Servlet 會將音訊資料傳送到 Cloud Speech API，該 API 則會將偵測到的語音轉錄內容傳回 Servlet。最後，Servlet 會將語音轉錄結果傳送給用戶端，並顯示在網頁上。

為了達成上述目的，您需要建立多個元件：

• Java Servlet，用於提供網頁的靜態 HTML、JavaScript 和 CSS。
• JavaScript、HTML 和 CSS，用於將網頁連線到使用者的麥克風、擷取原始位元組，以及透過 Websocket 將位元組串流傳輸到 Servlet。
• Servlet Websocket 處理常式，用於將從用戶端收到的音訊位元組串流傳輸至 Cloud Speech API，並將 Cloud Speech API 的語音轉錄結果傳回用戶端。

學習內容

• 建立虛擬機器 (VM)
• 啟動 HTTP Java Servlet
• 透過網頁擷取音訊資料
• 將語音轉錄成文字

事前準備

本實驗室假設您已熟悉下列項目：

• Java 程式設計語言。
• Java Servlet (具體來說，是 Jetty Servlet 容器)。雖然可以使用其他 Servlet 容器，但由於範例解決方案採用 Jetty，因此使用其他容器的解決方案較難驗證。
• JavaScript 程式設計語言。網頁的程式碼幾乎都以 JavaScript 編寫，很難避免在網頁實驗室中使用。
• Linux 指令列。本實驗室的大部分內容是在 Linux 命令提示字元中進行，熟悉常見工具和該環境的文字編輯器，可助您更快上手。
• Maven 專案管理工具。原則上，您可以使用任何 Java 專案管理工具，但解決方案採用 Maven，使用其他工具的解決方案較難驗證。

設定和需求

瞭解以下事項後，再點選「Start Lab」按鈕

請詳閱以下操作說明。實驗室活動會計時，且中途無法暫停。點選「Start Lab」後就會開始計時，顯示可使用 Google Cloud 資源的時間。

您將在真正的雲端環境完成實作實驗室活動，而不是模擬或示範環境。為此，我們會提供新的暫時憑證，供您在實驗室活動期間登入及存取 Google Cloud。

為了順利完成這個實驗室，請先確認：

• 可以使用標準的網際網路瀏覽器 (Chrome 瀏覽器為佳)。

注意事項：請使用無痕模式 (建議選項) 或私密瀏覽視窗執行此實驗室，這可以防止個人帳戶和學員帳戶之間的衝突，避免個人帳戶產生額外費用。

• 是時候完成實驗室活動了！別忘了，活動一旦開始將無法暫停。

注意事項：務必使用實驗室專用的學員帳戶。如果使用其他 Google Cloud 帳戶，可能會產生額外費用。

如何開始研究室及登入 Google Cloud 控制台

1. 點選「Start Lab」按鈕。如果實驗室會產生費用，畫面上會出現選擇付款方式的對話方塊。左側的「Lab Details」窗格會顯示下列項目：

   • 「Open Google Cloud console」按鈕
   • 剩餘時間
   • 必須在這個研究室中使用的臨時憑證
   • 完成這個實驗室所需的其他資訊 (如有)

2. 點選「Open Google Cloud console」；如果使用 Chrome 瀏覽器，也能按一下滑鼠右鍵，選取「在無痕視窗中開啟連結」。

   接著，實驗室會啟動相關資源，並開啟另一個分頁，顯示「登入」頁面。

   提示：您可以在不同的視窗中並排開啟分頁。

   注意：如果頁面中顯示「選擇帳戶」對話方塊，請點選「使用其他帳戶」。

3. 如有必要，請將下方的 Username 貼到「登入」對話方塊。

   {{{user_0.username | "Username"}}}

   您也可以在「Lab Details」窗格找到 Username。

4. 點選「下一步」。

5. 複製下方的 Password，並貼到「歡迎使用」對話方塊。

   {{{user_0.password | "Password"}}}

   您也可以在「Lab Details」窗格找到 Password。

6. 點選「下一步」。

   重要事項：請務必使用實驗室提供的憑證，而非自己的 Google Cloud 帳戶憑證。 注意：如果使用自己的 Google Cloud 帳戶來進行這個實驗室，可能會產生額外費用。

7. 按過後續的所有頁面：

   • 接受條款及細則。
   • 由於這是臨時帳戶，請勿新增救援選項或雙重驗證機制。
   • 請勿申請免費試用。

Google Cloud 控制台稍後會在這個分頁開啟。

注意：如要使用 Google Cloud 產品和服務，請點選「導覽選單」，或在「搜尋」欄位輸入服務或產品名稱。

工作 1：建立虛擬機器

Compute Engine 是一項服務，可讓您在 Google 基礎架構上啟動 VM。在本實驗室中，您將建立及使用 VM 執行以 Java 8 編寫的 Servlet，該 Servlet 會代管網站，並使用 Cloud Speech API 為用戶端提供動態語音轉錄內容。在本實驗室中，您也會使用 VM 執行程式碼。

1. 如要建立新的 VM，請依序點按「導覽選單」 () >「Compute Engine」>「VM 執行個體」。

2. 點按「建立執行個體」，建立新的執行個體。

3. 前往「機器設定」專區。

   • 將新執行個體命名為 speaking-with-a-webpage。

   • 選擇可用區 。

   • 其他值則保留預設值。

4. 點按「OS 和儲存空間」。

   • 點按「變更」，開始設定開機磁碟，並選取下列選項：

     • 在「作業系統」部分，選取「Debian」。

     • 在「版本」部分，選取「Debian GNU/Linux 12 (bookworm)」。

     • 將「開機磁碟類型」保留預設值。

     • 點按視窗底部的「選取」。

5. 點按「網路」。

   • 在「防火牆」部分，勾選「允許 HTTP 流量」和「允許 HTTPS 流量」。

6. 點按「安全性」。

   • 在「身分及 API 存取權」>「服務帳戶」部分，保留預設值。

   • 在「存取權範圍」部分，選取「允許所有 Cloud API 的完整存取權」。

7. 點按「建立」。

VM 會在幾分鐘後開始運作！在「VM 執行個體」清單中，查看 VM 及其詳細資料。請留意會在下個步驟使用的「SSH」按鈕，以及要在本實驗室後續部分使用的外部 IP。

8. 點按右側的「SSH」按鈕即可連線。如果出現提示訊息，請按一下「授權」。

系統會隨即開啟新視窗，並連線至 VM，提供命令提示字元。本實驗室的後續部分都會用到這個介面。

測試已完成的工作

點按「Check my progress」，確認工作已完成。

建立虛擬機器

相關說明文件

如要進一步瞭解 Compute Engine 及其各種功能，請參閱 Compute Engine 說明文件。

工作 2：下載並設定可運作的範例

1. 在 SSH 工作階段中，安裝 Git、Java 17 和 Maven 專案管理工具，用於編譯及執行範例程式碼：

sudo apt update && sudo apt install git -y sudo apt install -y maven openjdk-17-jdk 注意：這個指令會在幾分鐘內執行完畢。

2. 將可運作的範例複製到 VM：

git clone https://github.com/googlecodelabs/speaking-with-a-webpage.git

這會建立 speaking-with-a-webpage 目錄，其中包含下列各部分的子目錄。每個子目錄都會以前一個為基礎，逐步新增功能：

• 01-hello-https - 包括含有靜態檔案的最低 Jetty Servlet，以及透過 HTTPS 提供的處理常式
• 02-webaudio - 填寫用戶端 JavaScript，透過用戶端麥克風錄音，並顯示視覺效果，確認麥克風可正常運作
• 03-websockets - 修改用戶端和伺服器，透過 WebSocket 與彼此通訊
• 04-speech - 修改伺服器，將音訊內容傳送到 Cloud Speech API，並將後續語音轉錄內容傳送至 JavaScript 用戶端

本實驗室使用的範例採用的不是一般 HTTPS 通訊埠，而是用於開發目的的非特權通訊埠 8443。

3. 如要從網路瀏覽器存取這個通訊埠，請使用下列 gcloud 指令開啟 VM 的防火牆：

gcloud compute firewall-rules create dev-ports \ --allow=tcp:8443 \ --source-ranges=0.0.0.0/0 附註：您可以比較各步驟間的不同之處。

如要比較某個部分與下個部分間的不同之處，可以使用下列指令：

cd ~/speaking-with-a-webpage

git diff --no-index 01-hello-https/ 02-webaudio/

這會顯示 02-https 與 03-webaudio 目錄/步驟之間的差異。

使用方向鍵、PgUp/PgDn 鍵可進行瀏覽，按下 q 鍵則可退出。

測試已完成的工作

點按「Check my progress」，確認工作已完成。

安裝必要軟體並建立防火牆規則

工作 3：啟動 HTTPS Java Servlet

Java Servlet 是支援這個網頁應用程式的支柱，提供必要的用戶端 HTML、CSS 和 JavaScript 程式碼，並可連線至 Cloud Speech API 來提供語音轉錄功能。

從網頁存取使用者的麥克風時，瀏覽器會要求網頁透過安全管道進行通訊，以防竊聽。因此，請設定 Servlet，透過 HTTPS 提供網頁。由於設定及提供安全網頁本身就是一個主題，因此在本實驗室中，請使用我們所提供範例解決方案中的自行簽署憑證和 Jetty 設定檔，即可建立足以執行操作的開發環境。

在這個部分中，請直接閱讀內文，並執行 01-hello-https 中提供的 Maven 專案。請特別注意 src/ 目錄中的檔案，因為這些是要在後續步驟中建構的主要檔案：

• src/main/webapp 中的檔案包括 JavaScript、CSS 和 HTML 檔案，這些檔案是由 Jetty 靜態提供
• TranscribeServlet.java 可定義 Servlet，用於處理 /transcribe 路徑收到的要求

執行範例解決方案

在提供的 speaking-with-a-webpage 存放區中，01-hello-https 子目錄包含為 HTTPS 設定的 Maven Servlet 專案。這個 Servlet 會使用 Jetty Servlet 架構，同時提供靜態檔案和動態端點。此外，這個範例也會使用上述網誌文章，透過 Key Tool 指令產生自行簽署的憑證，並新增 Jetty 設定來支援 HTTPS。

1. 啟動 Servlet，並前往 01-hello-https。

cd ~/speaking-with-a-webpage/01-hello-https

2. 執行以下程式碼：

mvn clean jetty:run

3. 在網路瀏覽器中前往：https://<your-external-ip>:8443

注意：您可以在 Cloud 控制台的「VM 執行個體」頁面找到外部 IP 位址。

由於範例 Servlet 會監聽非標準通訊埠，因此直接點按「外部 IP」連結不會導向執行中的 Servlet。如要存取 Servlet，您必須按照上述內容新增相關通訊埠。

首次使用 HTTPS 網址存取網頁應用程式時，瀏覽器可能會發出警告，指出您的連線不是私人連線。這是因為範例應用程式使用自行簽署的 SSL 憑證進行開發。在正式環境中，您需要憑證授權單位簽署的 SSL 憑證，但在本實驗室中，只要有自行簽署的 SSL 憑證即可，但請務必不要透過網頁談論任何機密。😁

測試已完成的工作

點按「Check my progress」，確認工作已完成。

執行範例解決方案 (hello-https)

工作 4：透過網頁擷取音訊資料

在使用者授予同意後，網頁就能透過 Web Audio API 擷取使用者麥克風的音訊資料。Cloud Speech API 需要特定格式的原始資料，並瞭解取樣率。

範例解決方案

在我們提供的 speaking-with-a-webpage 存放區中，02-webaudio 子目錄會新增 Web Audio getUserMedia 函式，將使用者的麥克風連結到音訊視覺效果，藉此利用 01-hello-https 程式碼範例執行建構。接著，將 ScriptProcessorNode 新增至音訊管道，以便擷取原始音訊位元組，準備傳送到伺服器。由於 Cloud Speech API 最終也需要 sampleRate，因此也會一併擷取。請按照下列步驟啟動 02-webaudio 應用程式：

1. 按下 CTRL+C 鍵，停止伺服器。

2. 前往包含 02-webaudio 的目錄：

cd ~/speaking-with-a-webpage/02-webaudio

3. 執行應用程式：

mvn clean jetty:run

4. 如要存取執行中的網頁應用程式，請在 Cloud 控制台的「VM 執行個體」頁面中尋找外部 IP 位址，然後在瀏覽器中前往：https://<your-external-ip>:8443。

附註：您可以執行下方指令，查看上一部分 (01-hello-https) 與本節 (02-webaudio) 間的不同之處：

cd ~/speaking-with-a-webpage git diff --no-index 01-hello-https/ 02-webaudio/

測試已完成的工作

點按「Check my progress」，確認工作已完成。

執行範例解決方案，透過網頁擷取音訊資料

5. 按下 CTRL+C 鍵，停止伺服器。

工作 5：將音訊資料從用戶端串流傳輸到伺服器

一般 HTTP 連線不適合用於將音訊資料即時串流傳輸到伺服器，同時接收轉錄稿。在這個部分中，您會從用戶端建立與伺服器的 Web Socket 連線，並使用該連線將音訊中繼資料 (即取樣率) 和相關資料傳送到伺服器，同時監聽回應 (即資料的轉錄稿)。

串流傳輸音訊位元組

本節提供的範例會變更 TranscribeServlet，從 WebSocketServlet 進行擴充，以便註冊 WebSocketAdapter。範例定義的 WebSocketAdapter 會接收訊息，然後傳回用戶端。

在用戶端上，這個範例會將上個步驟中的 scriptNode，替換成將資料傳送至稍後定義的通訊端，然後建立與伺服器的安全 WebSocket 連線。伺服器和麥克風連線後，就會開始監聽伺服器的訊息，然後將取樣率傳送給伺服器。伺服器傳回取樣率時，用戶端會將事件監聽器替換成更永久的語音轉錄處理常式，並連結 scriptNode，開始將音訊位元組串流傳輸至伺服器。

1. 前往包含 03-websockets 的目錄：

cd ~/speaking-with-a-webpage/03-websockets

2. 執行應用程式：

mvn clean jetty:run

3. 如要存取執行中的網頁應用程式，請在 Cloud 控制台的「VM 執行個體」頁面中尋找外部 IP 位址，然後在瀏覽器中前往：https://<your-external-ip>:8443。

4. 按下 CTRL+C 鍵，停止伺服器。

工作 6：將語音轉錄成文字

Google Cloud Speech 串流 API 可讓您即時將音訊位元組傳送至 API，並以非同步方式接收系統偵測到的語音轉錄內容。API 會預期位元組採用特定格式 (取決於要求開頭傳送的設定)。在本網頁應用程式中，您會以 LINEAR16 格式傳送 API 原始音訊樣本，也就是每個樣本均為 16 位元的正負整數，並以用戶端採取的取樣率傳送。

範例解決方案

在範例提供的 speaking-with-a-webpage 存放區中，04-speech 子目錄會填入 03-websockets 步驟的伺服器程式碼。這會併入上述 StreamingRecognizeClient 程式碼範例中的程式碼，用來建立連結、傳送音訊位元組，以及從 Cloud Speech API 接收轉錄稿。非同步接收轉錄稿時，會使用 JavaScript 用戶端的連線傳送這些轉錄稿。JavaScript 用戶端會直接將其輸出至網頁。

1. 啟動應用程式：

cd ~/speaking-with-a-webpage/04-speech mvn clean jetty:run

2. 如要存取執行中的網頁應用程式，請在 Cloud 控制台的「VM 執行個體」頁面中尋找外部 IP 位址，然後在瀏覽器中前往：https://<your-external-ip>:8443。

工作 7：隨堂測驗

完成下列選擇題能加深您的印象，更清楚本實驗室介紹的概念，盡力回答即可。

恭喜！

您已學會如何使用 gcloud 建立 VM，並啟動 Java Servlet，透過網頁擷取音訊資料並轉錄成文字！

後續步驟/瞭解詳情

請考慮加入下列軟體改善項目：

• 用戶端應用程式目前只會列印文字，但文字有許多運用方式，請將其視為另一個使用者介面。關鍵字可叫用特定動作，建議您將文字與對話引擎整合，或直接當成字幕使用。
• 將語音轉錄內容與 Cloud Natural Language API 整合，以便從非結構化文字擷取結構。
• Cloud Speech API 支援超過 80 種語言，只要透過簡單的設定參數即可選擇。歡迎改成您使用的其他語言，或是您正在學習的語言！
• 目前的專案設定主要適用於開發用途，部署到正式環境時應進行變更。舉例來說，您可以在執行個體群組中使用多個 Compute Engine 執行個體，並使用 SSL 負載平衡器，在用戶端與伺服器之間建立安全連線。

Google Cloud 教育訓練與認證

協助您瞭解如何充分運用 Google Cloud 的技術。我們的課程會介紹專業技能和最佳做法，讓您可以快速掌握要領並持續進修。我們提供從基本到進階等級的訓練課程，並有隨選、線上和虛擬課程等選項，方便您抽空參加。認證可協助您驗證及證明自己在 Google Cloud 技術方面的技能和專業知識。

使用手冊上次更新日期：2025 年 9 月 15 日

實驗室上次測試日期：2025 年 9 月 15 日

Copyright 2025 Google LLC 保留所有權利。Google 和 Google 標誌是 Google LLC 的商標，其他公司和產品名稱則有可能是其關聯公司的商標。