创建一个文字转语音翻译程序

如何使用 JavaScript 构建文本转语音应用程序？本教程将介绍如何使用 JavaScript 将文本转换为语音WebSpeechAPI。在文本区域中输入您想要的任何内容，选择您编写的语言，然后单击按钮收听结果！

创建一个文字转语音翻译程序第1张

WebSpeechAPI 简介

这WebSpeechAPI是一个 JavaScript API，

开发人员通过speechSynthesis组件添加语音功能。

SpeechSynthesis允许您传递文本内容和其他参数例如：语音。

它还具有多种启动、暂停、恢复和取消的方法。要从文本生成语音，首先是创建组件的实例，SpeechSynthesisUtterance如下所示：

utterance = new SpeechSynthesisUtterance();

SpeechSynthesisUtterance是代表您希望系统说出的文本的部分。下一步是使用 text 属性指定文本内容，如下所示；

utterance.text = "Hello world";

这里我们希望计算机说“Hello world”。

最后，调用该speak() 方法，该方法将说出上面定义的给定话语（SpeechSynthesisUtterance对象）。

speechSynthesis.speak(utterance);

我们还可以设置语言，例如英语-US，

utterance.lang = 'en-US'

控制器SpeechSynthesis还提供了一种getVoices() 方法，

该方法返回当前设备系统支持的语音列表，

允许用户选择自定义语音。

HTML结构

好的，让我们开始构建吧。 HTML 结构将包含以下元素：

<textarea> 要转换的文本</textarea>。
<select>。在选择元素内填充语言。
单击时会生成所<button>提供的文本内容。

在标头中添加 Bootstrap 的CSS链接，

如下所示：

 <link
  href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
  rel = ‘stylesheet’ 
  integrity = "sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
  crossorigin = "anonymous"
/>

添加 HTML 结构。

<div class = ‘container’ >
  <div class = ‘message alert alert-warning’ role = ‘alert’ >
  </div>
  <h1>Text to Voice Converter</h1>
  <form>
  <div class = ‘form-group’ >
    <label for=‘text’>Enter your text:</label>
    <textarea name="text" class="content form-control form-control-lg" rows="6"></textarea>
  </div>
  <div class = ’form-group‘ >
    <label for = ‘voices’ > Choose your language: </label>
    <select class = ‘select-voices form-control form-control-lg’ name = ‘voices’ >
    </select>
  </div>
  <button type = ’button‘ class = ’convert btn btn-primary‘ >? Convert Text to Voice </button>
  </form>
</div>

使用 CSS

Bootstrap 几乎为我们处理了所有的样式。但让我们在设计中添加一些自定义 CSS 属性。这些将为我们提供自定义字体、容器、表单中元素的一些额外间距以及隐藏警报消息的规则。

@import url("https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap");
body {
  font-family: 
  ‘DM Mono’, monospace;
}
.container {
  width: 100%;
  max-width: 600px;
  padding: 2rem 0;
}
.form-group {
  margin: 2rem 0;
}
label {
  margin-bottom: 1rem;
}
.message{
    display: none;
}

我们已设置display:none警报组件，以便仅在有错误消息要显示时才会出现。

JavaScript 功能

正如我在简介中所解释的，我们可以使用该speechSynthesis.getVoices()方法获取声音；让我们首先获取它们并将它们存储在这样的数组中。

const voices = [
  { name: 
  ‘Google Deutsch’, 
  lang: ‘de-DE’ 
  },  
  { name: 
  ’Google US English‘, 
  lang: ’en-US‘ 
  },
  { name: 
  ’Google UK English Female‘, 
  lang: ’en-GB‘
  },
  { name: 
  ‘Google UK English Male’, 
  lang: ’en-GB‘ 
  },
  { name: 
  ‘Google español’, 
  lang: ‘es-ES’
  },
  { name: 
  ‘Google español de Estados Unidos’, 
  lang: ‘es-US’
  },
  { name: 
  ’Google français‘, lang: "fr-FR" 
  },
  { name: 
  ‘Google हिन्दी’, 
  lang: ’hi-IN‘
  },
  { name: 
  ‘Google Bahasa Indonesia’, 
  lang: ‘id-ID’
  },
  { name: 
  ’Google italiano‘, 
  lang: ‘it-IT’ 
  },
  { name: 
  ’Google 日本語‘, 
  lang: ‘ja-JP’
  },
  { name: 
  ‘Google 한국의’, 
  lang: ‘ko-KR’
  },
  { name: 
  ’Google Nederlands‘, 
  lang: "nl-NL" 
  },
  { name: 
  ’Google polski‘, lang: ‘pl-PL’ 
  },
  { name: 
  ’Google português do Brasil‘, 
  lang: ’pt-BR‘ 
  },
  { name: 
  ‘Google русский’, 
  lang: ’ru-RU‘
  },
  { name: 
  ‘Google 普通话（***大陆）", 
  lang: ‘zh-CN’ 
  },
  { name: 
  ’Google 粤語（***）‘, 
  lang: ’zh-HK‘
  },
  { name: 
  ’Google 國語（臺灣）‘, 
  lang: ‘zh-TW’
  }
];

确定所需的元素

要使用 ( DOM ) ，

获取警报、选择和按钮等。

const optionsContainer = 
document.querySelector(‘.select-voices’) ;
const convertBtn = 
document.querySelector(’.convert‘) ;
const messageContainer = 
document.querySelector(‘.message’)

创建声音选择

代表声音下拉列表的元素，用户可以从中选择一个选项optionsContainer。<select>

我们想用声音数组中的声音填充它。创建一个名为的函数addVoices()。

 function addVoices()
 {
  // populate options with the voices from array 
}

在函数内部，

使用forEach()，

循环 voices 数组，

并为每个 voice 对象设置 option.value = voice.lang和option.text = voice.name，

然后附加到 select 元素。

function addVoices() 
{
  console.log(voices);
  voices.forEach((voice) => 
  {
    let option = 
    document.createElement(’option‘);
    option.value = 
    voice.lang;
    option.textContent = 
    voice.name;
    optionsContainer.appendChild(option);
    if ( voice.lang === ’en-US‘ ) 
    {
      option.selected = true ;
    }
  });
}

我们需要调用该addVoices()函数来应用功能，

但是，对于谷歌浏览器，

我们需要***事件voiceschanged，

然后调用addVoices()函数。

所以我们要添加一个条件：

if (navigator.userAgent.indexOf(’Chrome‘) !== -1) 
{
  speechSynthesis.addEventListener(’voiceschanged‘, addVoices);
} 
else 
{
  addVoices();
}

该voiceschanged事件是当可用语音合成声音列表更改时触发的 JavaScript 事件。

当可用语音列表可供使用时，会发生该事件。

按钮事件***器

为生成按钮添加点击事件***器。

     convertBtn.addEventListener(’click‘, function () 
     {
     // display an alert message if content is empty 
     // pass the arguments to convertToSpeech() 
     });

在事件***器函数中，

我们希望在未提供内容时显示警报，

从文本区域获取文本，

获取所选语言，

并将值传递给函数convertToSpeech()。

按如下方式更新事件***器。

convertBtn.addEventListener(’click‘, function () 
{
  convertText = 
  document.querySelector(‘.content’).value;
  if (convertText === "") 
  {
  messageContainer.textContent = 
  " Please provide some text";
  messageContainer.style.display = 
  "block";
  
  setTimeout(() => {
    messageContainer.textContent = 
    ""; 
    messageContainer.style.display = 
    "none";
  }, 2000);
  
  return;
}
  const selectedLang =
           optionsContainer.options[optionsContainer.selectedIndex].value;
           convertToSpeech(convertText, selectedLang);
});

创建convertToSpeech()函数并添加以下代码：

function convertToSpeech(text, lang) {
  if (!(’speechSynthesis‘ in window)) {
    messageContainer.textContent =
      ’ Your browser is not supported, try another browser‘;
      messageContainer.style.display =‘block’
    return;
  }
  let utterance = new SpeechSynthesisUtterance();
  utterance.lang = lang;
  utterance.text = text;
  speechSynthesis.speak(utterance);
}

该covertToSpeech()函数将采用两个参数，即要转换的文本和文本应使用的语言。

让我们来分解一下：