使用 Web Speech API 在浏览器中将文本转为语音

Web Speech API有两个功能：语音合成（也称为文本转语音）和语音识别。通过语音合成，SpeechSynthesis API我们可以命令浏览器用多种不同的声音读出任意文本。

从应用程序中的语音提醒，到在您的网站上启用Autopilot 支持的聊天机器人，Web Speech API 在 Web 界面中拥有巨大的潜力。继续阅读，了解如何让您的 Web 应用程序与您互动。

你需要什么

如果您想在我们了解 API 时构建此应用程序，SpeechSynthesis那么您将需要以下几样东西：

现代浏览器（大多数桌面和移动浏览器都支持该 API）
文本编辑器

准备就绪后，创建一个工作目录，并将此 HTML 文件和CSS 文件下载到其中。确保它们位于同一文件夹中，并且 CSS 文件名为style.css。在浏览器中打开 HTML 文件，您应该看到以下内容：

让我们通过让浏览器第一次与我们对话来开始使用 API。

语音合成 API

在开始使用这个小应用程序之前，我们可以使用浏览器的开发者工具让浏览器开始说话。在任何网页上，打开开发者工具控制台并输入以下代码：

speechSynthesis.speak(new SpeechSynthesisUtterance("Hello, this is your browser speaking."));

您的浏览器会以默认语音朗读“您好，这是您的浏览器在说话。 ”。我们可以稍微分解一下。

我们创建了一个SpeechSynthesisUtterance包含我们想要朗读的文本的对象。然后，我们将朗读的内容传递给speak该speechSynthesis对象的方法。这会将待朗读的内容排入队列，然后启动浏览器朗读。如果您向该方法发送多个朗读内容，speak它们将依次朗读。

让我们将之前下载的启动代码变成一个小应用程序，我们可以在其中输入要说的文本并选择浏览器所说的声音。

Web 应用程序中的语音合成

在文本编辑器中打开之前下载的 HTML 文件。我们首先会连接表单，让它在你提交时朗读你在文本输入框中输入的内容。稍后，我们会添加选择语音的功能。

<script>在HTML 底部的标签之间，我们将首先监听DOMContentLoaded事件，然后选择一些我们需要的元素的引用。

<script>
  window.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementById('voice-form');
    const input = document.getElementById('speech');
  });
</script>

然后，我们需要监听表单上的提交事件，并在该事件触发时从输入框中获取文本。我们将使用该文本创建一个SpeechSynthesisUtterance，并将其传递给speechSynthesis.speak。最后，我们清空输入框，等待下一个输入。

<script>
  window.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementById('voice-form');
    const input = document.getElementById('speech');

    form.addEventListener('submit', event => {
      event.preventDefault();
      const toSay = input.value.trim();
      const utterance = new SpeechSynthesisUtterance(toSay);
      speechSynthesis.speak(utterance);
      input.value = '';
    });
  });
</script>

在浏览器中打开 HTML 代码，并在输入框中输入一些文本。<select>现在你可以忽略输入框，我们将在下一节中使用它。点击“说出来”，浏览器就会读出你输入的内容。

让浏览器朗读一段文字并不需要太多代码，但如果我们想选择它使用的语音呢？让我们在页面上的下拉菜单中填充可用的语音，然后使用它来选择我们想要使用的语音。

为文本转语音挑选声音

我们需要获取<select>页面上元素的引用，并初始化几个变量，用于存储可用的语音和当前正在使用的语音。将其添加到脚本顶部：

<script>
  window.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementById('voice-form');
    const input = document.getElementById('speech');
    const voiceSelect = document.getElementById('voices');
    let voices;
    let currentVoice;

    form.addEventListener('submit', event => { //... })
  });
</script>

接下来，我们需要用可用的语音填充 select 元素。我们将创建一个新函数来执行此操作，因为我们可能需要多次调用它（稍后会详细介绍）。我们可以调用speechSynthesis.getVoices()来返回可用的[SpeechSynthesisVoice](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisVoice) 对象。

在填充语音选项的同时，我们还应该检测当前所选的语音。如果我们已经选择了语音，我们可以对照currentVoice对象进行检查；如果尚未选择语音，我们可以使用该voice.default属性检测默认语音。

    let voices;
    let currentVoice;

    const populateVoices = () => {
      const availableVoices = speechSynthesis.getVoices();
      voiceSelect.innerHTML = '';

      availableVoices.forEach(voice => {
        const option = document.createElement('option');
        let optionText = `${voice.name} (${voice.lang})`;
        if (voice.default) {
          optionText += ' [default]';
          if (typeof currentVoice === 'undefined') {
            currentVoice = voice;
            option.selected = true;
          }
        }
        if (currentVoice === voice) {
          option.selected = true;
        }
        option.textContent = optionText;
        voiceSelect.appendChild(option);
      });
      voices = availableVoices;
    };

    form.addEventListener('submit', event => { //... })

我们可以populateVoice立即调用。有些浏览器会在页面加载时立即加载语音列表并返回。其他浏览器需要异步加载语音列表，并在加载完成后发出“voiceschanged”事件。但有些浏览器根本不会发出此事件。

为了考虑所有可能的情况，我们将populateVoices立即调用并将其设置为“voiceschanged”事件的回调。

      voices = availableVoices;
    };

    populateVoices();
    speechSynthesis.onvoiceschanged = populateVoices;

    form.addEventListener('submit', event => { //... })
  });
</script>

重新加载页面，您将看到<select>元素中填充了所有可用的语音，包括语音支持的语言。我们尚未连接语音的选择和使用，接下来会讲到。

监听选择元素的“change”事件，每当该事件触发时，currentVoice使用selectedIndex该<select>元素进行选择。

    populateVoices();
    speechSynthesis.onvoiceschanged = populateVoices;

    voiceSelect.addEventListener('change', event => {
      const selectedIndex = event.target.selectedIndex;
      currentVoice = voices[selectedIndex];
    });

    form.addEventListener('submit', event => { //... })
  });

现在，为了将声音与语音话语一起使用，我们需要在我们创建的话语上设置声音。

    form.addEventListener('submit', event => {
      event.preventDefault();
      const toSay = input.value.trim();
      const utterance = new SpeechSynthesisUtterance(toSay);
      utterance.voice = currentVoice;
      speechSynthesis.speak(utterance);
      input.value = '';
    });
  });
</script>

重新加载页面并尝试选择不同的声音并说不同的话。

奖励：构建视觉说话指示器

我们已经构建了一个可以使用不同声音的语音合成器，但为了好玩，我还想再加一个功能。语音会触发一系列事件，你可以利用这些事件让你的应用响应语音。为了完成这个小应用，我们将制作一个在浏览器说话时显示的动画。我已经添加了动画的 CSS，<main>因此为了激活它，我们需要在浏览器说话时为元素添加一个“speaking”类。

<main>获取脚本顶部元素的引用：

<script>
  window.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementById('voice-form');
    const input = document.getElementById('speech');
    const voiceSelect = document.getElementById('voices');
    let voices;
    let currentVoice;
    const main = document.getElementsByTagName('main')[0];

现在，我们可以监听话语的开始和结束事件，以添加或移除“speaking”类。但是，如果我们在动画中途移除该类，它将无法平滑淡出，因此我们应该使用“animationiteration”事件监听动画迭代的结束，然后移除该类。

    form.addEventListener('submit', event => {
      event.preventDefault();
      const toSay = input.value.trim();
      const utterance = new SpeechSynthesisUtterance(toSay);
      utterance.voice = currentVoice;
      utterance.addEventListener('start', () => {
        main.classList.add('speaking');
      });
      utterance.addEventListener('end', () => {
        main.addEventListener(
          'animationiteration',
          () => main.classList.remove('speaking'),
          { once: true }
        );
      });
      speechSynthesis.speak(utterance);
      input.value = '';
    });
  });
</script>

现在，当您启动浏览器说话时，背景将闪烁蓝色，并且当话语结束时它将停止。

您的浏览器正在变得喋喋不休

在本文中，您了解了如何开始使用Web Speech API中的语音合成 API。该应用程序的所有代码都可以在 GitHub 上找到，您可以查看实际运行效果，也可以在 Glitch 上进行 remix。

我很高兴看到这个 API 具有在浏览器内构建我自己的机器人的潜力，因此请期待未来有更多这样的 API。

你用过语音合成 API 吗？或者有什么计划？欢迎在下方评论区留言，或者给我发邮件：philnash@twilio.com或 Twitter：@philnash。

鏂囩珷鏉ユ簮锛�https://dev.to/twilio/text-to-speech-in-the-browser-with-the-web-speech-api-20nk