使用网络语音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中文网其他相关文章！