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

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

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

步驟1：簡單的基礎(chǔ)

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

<div>
  <h1>簡單的文本到語音</h1>
  <p id="warning">抱歉，您的瀏覽器不支持網(wǎng)絡(luò)演講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>

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

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

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

按鈕：禁用{
  光標(biāo)：不允許；
  不透明度：0.3;
}

＃警告 {
  顏色：紅色；
  顯示：無；
  字體大?。?.4REM;
}

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

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

讓我們說話，txtfld;

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

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

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

document.AddeventListener（'domcontentloaded'，init）;

步驟2：國際聲音選擇

要使用默認(rèn)的語言，我們需要其他代碼。讓我們?yōu)檎Z音選項添加選擇元素：

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

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

函數(shù)getlanguagetags（）{
  // ...（與之前相同）...
}

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

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

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

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

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

setUpVoices()函數(shù)使用speechSynthesis.getVoices()檢索SpeechSynthesisVoice對象。我們使用getAllVoices()來處理潛在的重複聲音。將一個唯一的ID添加到每個語音對像中以進(jìn)行以後過濾。 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()的最後一行調(diào)用一個函數(shù)來創(chuàng)建揚聲器菜單選項。語音ID用作選項的值，並顯示名稱和語言。

函數(shù)setupvoices（）{
  allVoices = getAllvoices（）;
  CreateSpeakerMenu（allvoices）;
}

函數(shù)getAllvoices（）{
  // ...（與之前相同）...
}

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

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

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

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

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

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

步驟3：完整的多面化應(yīng)用程序

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

• 語言選擇菜單
• 用戶調(diào)整的語音速度
• 根據(jù)語言選擇翻譯的默認(rèn)短語

這是更新的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 。標(biāo)誌， initialSetup將控制“語言”菜單設(shè)置。

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

init()函數(shù)現(xiàn)在創(chuàng)建blurbs數(shù)組， rateFld和languageMenu ，並為語言查找創(chuàng)建哈希表。

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

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

函數(shù)setupvoices（）{
  // ...（修改的設(shè)置UPVOICES函數(shù)如上所述）...
}

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

函數(shù)getPrimaryLanguages（langlist）{
  // ...（與之前相同）...
}

filterVoices()根據(jù)選定的語言過濾allVoices ，填充speakerMenu ，並使用適當(dāng)?shù)腂lurb更新Textarea。 createLanguageMenu()創(chuàng)建語言菜單選項。當(dāng)更改語言，觸發(fā)filterVoices()並重置語音選擇時， selectLanguage()將調(diào)用。

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

函數(shù)createLanguageMenu（）{
  // ...（與之前相同）...
}

函數(shù)selectlanguage（）{
  // ...（與之前相同）...
}

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

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

添加blurbs數(shù)組：

函數(shù)createblurbs（）{
  // ...（與之前相同）...
}

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

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

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

以上是使用網(wǎng)絡(luò)語音API進(jìn)行多語言翻譯的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！