使用網絡語音API進行多語言翻譯

自科幻小說的早期以來，我們就夢想著與我們交談的機器。今天，這很普遍。但是，使網站“說話”的技術仍然相對較新。

Web語音API的語音合成組件使我們能夠創建會說話的網頁。儘管仍然被認為是實驗性的，但它在最新的Chrome，Safari和Firefox版本中擁有出色的支持。

一個特別令人興奮的方面是它用於多種語言。 MAC OSX和大多數Windows系統都提供強大的跨瀏覽器支持。 Chrome動態加載聲音，因此，即使您的操作系統缺乏國際聲音，Chrome也會為它們提供。我們將構建一個三步的頁面，以各種語言說相同的文本。核心代碼從現有文檔進行了調整，但是我們的最終版本添加了增強功能，並且可以在我的Polyglot Codepen上查看。

步驟1：簡單的基礎

讓我們從一個基本頁面開始，其中包含語音內容的文本輸入和一個按鈕以觸發語音。

<div>
  <h1 id="簡單的文本到語音">簡單的文本到語音</h1>
  <p id="warning">抱歉，您的瀏覽器不支持網絡演講API。</p>  
  <textarea id="txtFld" placeholder="Type text here..."></textarea><br>
  <button id="speakBtn">說話</button><br>
  <p>注意：要獲得最佳的Mac性能，請使用最新的Chrome，Safari或Firefox。在Windows上，使用Chrome。</p>
</div>

僅當JavaScript檢測到Web語音API不兼容時，帶有ID“警告”的段落才會出現。注意Textarea和按鈕的ID；我們將在JavaScript中使用它們。

隨意自定義HTML樣式。您也可以將我的演示作為起點。

建議對禁用按鈕狀態進行樣式設計，以避免對使用不兼容的瀏覽器的用戶（例如過時的Internet Explorer）混淆。我們還將最初使用CSS隱藏警告：

按鈕：禁用{
  光標：不允許；
  不透明度：0.3;
}

＃警告 {
  顏色：紅色；
  顯示：無；
  字體大小：1.4REM;
}

現在為JavaScript！我們將定義引用“說話”按鈕和Textarea的變量。事件偵聽器可確保DOM加載後init()函數執行。我使用輔助功能“ QS”（下面定義）作為document.querySelector的快捷方式。 speakBtn上的事件偵聽器將talk()函數稱為。

talk()函數創建了一個SpeechSynthesisUtterance對象（Web語音API的一部分），將文本方面的文本分配給其text屬性，然後使用speechSynthesis.speak()播放音頻。聲音取決於瀏覽器和操作系統。在我的Mac上，默認值為Alex（美國英語）。在步驟2中，我們將添加一個語音選擇菜單。

讓我們說話，txtfld;

函數init（）{
  speakbtn = qs（“＃speak btn”）;
  txtfld = qs（“＃txtfld”）;
  speakbtn.addeventlistener（“ click”，talk，false）;
  if（！window.speechynthesis）{
    speakbtn.disabled = true;
    QS（“＃警告”）。 style.display =“ block”;
  }
}

函數談話（）{
  讓u =新的SpeechSynthessutterance（）;
  u.text = txtfld.value;
  specysynthesis.speak（u）;
}

//可重複使用的實用程序功能
函數QS（selectOrtext）{
  返回document.queryselector（selectOrtext）;
}

document.AddeventListener（'domcontentloaded'，init）;

步驟2：國際聲音選擇

要使用默認的語言，我們需要其他代碼。讓我們為語音選項添加選擇元素：

<h1 id="多語言文本到語音">多語言文本到語音</h1>
<div>
  <label for="speakerMenu">嗓音：</label>
  <select id="speakerMenu"></select>
</div>

在填充菜單之前，我們將將語言代碼映射到名稱。每種語言都有兩個字母的代碼（例如，英語的“ en”，“ ES”為西班牙語）。我們將創建一個對像數組，例如{"code": "pt", "name": "Portuguese"} 。輔助功能將搜索此數組以獲取特定的屬性值。我們將使用它查找與所選語音代碼相匹配的語言名稱。添加以下功能：

函數getlanguagetags（）{
  // ...（與之前相同）...
}

函數searchObjects（數組，prop，term，casesIntive = false）{
  // ...（與之前相同）...
}

現在，讓我們使用JavaScript填充選擇元素的選項。我們將聲明#speakerMenu Select元素的變量，語言顯示的佔位符（稍後刪除），聲音數組（ allVoices ），一系列語言代碼（ langtags ）和一個跟踪所選語音（ voiceIndex ）的變量。

讓SpeakBtn，TXTFLD，SpeakerMenu，AllVoices，langtags，foveindex = 0;

如果支持Web語音API，則更新的init()函數將引用添加到#speakerMenu和Call setUpVoices() 。對於Chrome，我們聆聽語音更改並重新運行設置。 Chrome會異步處理聲音，需要此額外的步驟。

函數init（）{
  // ...（如上所述修改的初始功能）...
}

setUpVoices()函數使用speechSynthesis.getVoices()檢索SpeechSynthesisVoice對象。我們使用getAllVoices()來處理潛在的重複聲音。將一個唯一的ID添加到每個語音對像中以進行以後過濾。 allVoices將包含類似的對象：

 {id：48，Voiceuri：“ Paulina”，名稱：“ Paulina”，Lang：“ ES-MX”，localservice：true}，
{id：52，Voiceuri：“ samantha”，名稱：“ samantha”，lang：“ en-us”，localservice：true}，
{ID：72，Voiceuri：“ Google Deutsch”，名稱：“ Google Deutsch”，Lang：“ De-de”，localservice：false}

setUpVoices()的最後一行調用一個函數來創建揚聲器菜單選項。語音ID用作選項的值，並顯示名稱和語言。

函數setupvoices（）{
  allVoices = getAllvoices（）;
  CreateSpeakerMenu（allvoices）;
}

函數getAllvoices（）{
  // ...（與之前相同）...
}

函數createSpeakerMenu（聲音）{
  // ...（與之前相同）...
}

selectSpeaker()函數（ speakerMenu更改時稱為稱呼）存儲所選索引，檢索選定的語音，提取語言代碼，搜索langtags為語言名稱，並更新顯示。

功能SelectSpeaker（）{
  // ...（與之前相同）...
}

最後，更新talk()使用選定的語音和語言，並允許設置語音率：

函數談話（）{
  // ...（如上所述修改的談話功能）...
}

這完成了步驟2。嘗試不同的聲音和語言！

步驟3：完整的多面化應用程序

最後一步完善了UI並添加了功能：

• 語言選擇菜單
• 用戶調整的語音速度
• 根據語言選擇翻譯的默認短語

這是更新的HTML：

<div>
  <label for="languageMenu">語言：</label>
  <select id="languageMenu"></select>
</div>

<div>
  <label for="rateFld">速度：</label>
  <input type="number" id="rateFld" min="0.5" max="2" step="0.1" value="0.8">
</div>

我們將修改JavaScript變量聲明包括： allLanguages ， primaryLanguages ， langhash ， langcodehash ， rateFld ， languageMenu和blurbs 。標誌， initialSetup將控制“語言”菜單設置。

讓SpeakBtn，TXTFLD，SpeakerMenu，AllVoices，langtags，foveindex = 0;
讓Alllanguages，主要語言，Langhash，Langcodehash；
讓Ratefld，Languagemenu，Blurbs;
令pinitialSetup = true;
讓DefaultBlurb =“我喜歡我祖國的傳統音樂。”;

init()函數現在創建blurbs數組， rateFld和languageMenu ，並為語言查找創建哈希表。

函數init（）{
  // ...（如上所述修改的初始功能）...
}

setUpVoices()現在調用getAllLanguages() ， getPrimaryLanguages() ， filterVoices()和createLanguageMenu() 。 getAllLanguages()從allVoices提取獨特的語言，而getPrimaryLanguages()提取主要語言代碼。

函數setupvoices（）{
  // ...（修改的設置UPVOICES函數如上所述）...
}

函數getallanguages（聲音）{
  // ...（與之前相同）...
}

函數getPrimaryLanguages（langlist）{
  // ...（與之前相同）...
}

filterVoices()根據選定的語言過濾allVoices ，填充speakerMenu ，並使用適當的Blurb更新Textarea。 createLanguageMenu()創建語言菜單選項。當更改語言，觸發filterVoices()並重置語音選擇時， selectLanguage()將調用。

功能filterVoices（）{
  // ...（與之前相同）...
}

函數createLanguageMenu（）{
  // ...（與之前相同）...
}

函數selectlanguage（）{
  // ...（與之前相同）...
}

添加getLookupTable()實用程序函數：

函數get lookuptable（objectsArray，prepname）{
  // ...（與之前相同）...
}

添加blurbs數組：

函數createblurbs（）{
  // ...（與之前相同）...
}

最後，更新talk()使用rateFld的語音率：

函數談話（）{
  // ...（如上所述修改的談話功能）...
}

這完成了Polyglot應用程序。用戶現在可以選擇一種語言，選擇語音，調整語音速度，並以所選語言的方式聽到所選文本。這證明了Web語音API在創建多語言Web應用程序中的功能和靈活性。

以上是使用網絡語音API進行多語言翻譯的詳細內容。更多資訊請關注PHP中文網其他相關文章！