原始 JavaScript 文本转语音 💬

我在 TTS（文本转语音）领域有着相当丰富的经验，它总是吸引着我的目光。

在我上学期间，我的项目总是涉及某种 TTS 或网络摄像头交互。

现在，这些总是非常酷，但在大多数网站上实际上并没有什么用处。

是的，它看起来很酷，但你什么时候真正需要它呢？

TTS 的另一个缺点是使用起来非常困难。你需要大量的插件或第三方解析器。

如今，我们很幸运，JavaScript 已经变得如此强大。

所以今天，我想再次看看 JavaScript 中的文本转语音。

今天的最终结果：在下面的 Codepen 上尝试一下。

JavaScript 文本转语音

我们可以利用使用 SpeechSynthesis 接口的 Web Speech API。

为了让计算机与我们对话，我们必须使用SpeechSynthesisUtterance界面。
这基本上可以理解为：语音请求。

在这个界面中，我们定义了声音、语言和音量。

它包含以下元素：

lang：输出的语言
pitch：设置输出口语的音调
rate：说话的速度
text：实际说出的文字
voice：你想使用哪种声音
volume：输出音量

检测浏览器支持

由于并非所有浏览器都完全支持此方法，因此我们需要检测我们的浏览器是否有此选项。

const SpeechSynthesisUtterance =
  window.webkitSpeechSynthesisUtterance ||
  window.mozSpeechSynthesisUtterance ||
  window.msSpeechSynthesisUtterance ||
  window.oSpeechSynthesisUtterance ||
  window.SpeechSynthesisUtterance;

这里我们定义一个 const 来检查支持是否被定义。

然后我们可以轻松地检查这个 const。

if (SpeechSynthesisUtterance !== undefined) {
  // Do the speech stuff
} else {
  console.warn('sorry not supported 😭');
}

获取声音

我不知道你怎么想，但我喜欢尝试各种设备的语音选项。

如果它是我的 Google Home，或者类似 Speech API 的东西。

Web Speech API 最酷的部分是我们可以查询所有可用的声音。

const voices = window.speechSynthesis.getVoices();
console.log(voices);
// []

现在运行这个可能会导致空结果，因此 API 附带的另一个很酷的东西是在声音加载后回调：

window.speechSynthesis.onvoiceschanged = () => {
  const voices = window.speechSynthesis.getVoices();
  console.log(voices);
  // (67) [SpeechSynthesisVoice, SpeechSynthesisVoice, ...]
};

现在，让我们向 HTML 添加一个选择列表并将声音呈现为选项。

<select id="voiceSelect"></select>

在我们的 JavaScript 中：

const voiceSelect = document.getElementById('voiceSelect');
let voices;
if (SpeechSynthesisUtterance !== undefined) {
  window.speechSynthesis.onvoiceschanged = () => {
    voices = window.speechSynthesis.getVoices();
    voices.forEach((voice, key) => {
      let option = document.createElement('option');
      option.textContent = voice.name + ' (' + voice.lang + ')';
      option.value = key;
      voiceSelect.appendChild(option);
    });
  };
}

我们现在应该有一个包含所有可用声音的选择列表。

JavaScript 获取文本输入并将其转换为语音

现在让我们添加一个输入字段，用户可以在其中输入一些将被朗读的文本。

我们的HTML意愿是这样的：

<form>
  <select id="voiceSelect"></select>
  <input id="voiceInput" />
  <button type="submit">Speak</button>
</form>

然后在我们的 JavaScript 中我们首先定义我们需要的变量：

const form = document.querySelector('form'),
  voiceSelect = document.getElementById('voiceSelect'),
  voiceInput = document.getElementById('voiceInput');

现在我们需要捕获表单提交并防止其提交到空白页面。

form.onsubmit = function(event) {
  event.preventDefault();
  // Do the speech action
};

JavaScript 使用文本转语音与我们交谈

现在终于到了让计算机与我们对话的时候了。

form.onsubmit = function(event) {
  event.preventDefault();

  let speak = new SpeechSynthesisUtterance(voiceInput.value);
  speak.voice = voices[voiceSelect.value];
  window.speechSynthesis.speak(speak);
};

现在，您可以在输入框中输入内容并选择语音。
按下“朗读”按钮，您就会听到一些语音！

浏览器支持

再次强调，对于一个相当新的 API 来说，它的覆盖范围相当广。
当然，IE 一如既往地让人头疼，而移动版 Opera 和 Android 也存在一些问题。

感谢您的阅读，让我们联系起来！

感谢您阅读我的博客。欢迎订阅我的电子邮件简报，并在Facebook或Twitter上与我联系。

鏂囩珷鏉ユ簮锛�https://dev.to/dailydevtips1/vanilla-javascript-text-to-speech-55n9