純前端實現語音文字互轉

本文作者系 360 奇舞團前端開發工程師

在現代互聯網的發展中，語音技術正逐漸成爲改變用戶體驗的重要一環。Web Speech API 的引入使得開發者能夠在瀏覽器中輕鬆實現語音識別和語音合成功能，爲用戶帶來更加直觀和便捷的操作體驗。本文將介紹 Web Speech API 的基本概念、功能特性以及如何利用它來構建創新的應用程序。

什麼是 Web Speech API？

Web Speech API 是一組瀏覽器 API，允許開發者在 Web 應用程序中集成語音識別和語音合成功能。這些 API 的引入標誌着瀏覽器開始支持本地端的語音交互能力，不僅改善了用戶體驗，還爲開發者提供了更多創新的可能性。

主要組成部分

Web Speech API 包括兩個核心部分：

  1. SpeechRecognition（語音識別） ：
  1. SpeechSynthesis（語音合成） ：

優勢

如何使用 Web Speech API？

實現語音識別

屬性
事件

通過以下簡單的 JavaScript 代碼片段，可以實現基本的語音識別功能：

const recognition = new webkitSpeechRecognition(); // 創建語音識別對象
recognition.lang = 'en-US'; // 設置識別語言爲英語
recognition.onresult = function(event) {
  const transcript = event.results[0][0].transcript; // 獲取識別結果文本
  console.log('識別結果:', transcript);
};
recognition.start(); // 開始識別

實現語音合成

屬性
事件

使用 SpeechSynthesis API 實現文本轉語音的功能，示例代碼如下：

const utterance = new SpeechSynthesisUtterance('Hello, welcome to our website.');
utterance.lang = 'en-US'; // 設置語音合成的語言
window.speechSynthesis.speak(utterance); // 開始語音合成

SpeechGrammar

1. 什麼是 SpeechGrammar？

SpeechGrammar 對象用於指定一個語法規則，這些規則可以幫助語音識別引擎識別特定的語音輸入。它常與 SpeechRecognition 對象結合使用。語法規則可以是簡單的文本，也可以是複雜的正則表達式或者語法定義。

2. 如何使用 SpeechGrammar？

要使用 SpeechGrammar，你需要創建一個 SpeechRecognition 對象，併爲其添加一個或多個 SpeechGrammar 對象。以下是一個示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta >
  <title>Speech Grammar Example</title>
</head>
<body>
  <button id="startButton">Start Speech Recognition</button>
  <div id="output"></div>

  <script>
   // 確保瀏覽器支持 SpeechRecognition
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

if (!SpeechRecognition) {
  console.error("SpeechRecognition not supported");
} else {
  // 創建 SpeechRecognition 實例
  const recognition = new SpeechRecognition();

  // 定義語法規則
  const grammar = '#JSGF V1.0; grammar colors; public <color> = red | green | blue | yellow ;';

  // 創建 webkitSpeechGrammarList 實例
  const speechGrammarList = new webkitSpeechGrammarList();
  speechGrammarList.addFromString(grammar, 1);  // 1 是語法的優先級

  // 將語法列表應用到 SpeechRecognition 實例
  recognition.grammars = speechGrammarList;

  // 配置識別選項
  recognition.lang = 'en-US';  // 設置語言
  recognition.interimResults = false;  // 只返回最終結果
  recognition.maxAlternatives = 1;  // 只返回一個替代結果

  // 開始識別
  recognition.start();

  recognition.onresult = (event) => {
    const result = event.results[0][0].transcript;
    console.log('識別結果:', result);
  };

  recognition.onerror = (event) => {
    console.error('識別錯誤:', event.error);
  };
}

  </script>
</body>
</html>

通過合理使用 SpeechGrammar 和 SpeechRecognition，你可以創建更精確的語音識別應用，提升用戶體驗。

實際應用場景包括但不限於：

總結

Web Speech API 的推出不僅僅是技術進步的體現，更是對互聯網應用程序用戶體驗提升的重大貢獻。通過使用這些功能強大的 API，開發者可以爲他們的應用程序添加創新的語音交互功能，從而吸引更多用戶並提升用戶滿意度。無論是構建下一代互動遊戲、個性化的助手應用，還是革新教育和商業應用，Web Speech API 都將爲您的創意提供強大的支持。

探索和利用 Web Speech API，讓我們共同打造一個更智能、更直觀的互聯網世界！

原文鏈接：https://juejin.cn/post/7397015953453875240

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/XCHeGpGqHfUyjlC7WNL7JQ

猜你喜歡