说话的网页和语音综合API

核心要点

• 语音合成API允许网站通过朗读文本为用户提供信息，这可以极大地帮助视障用户和多任务处理的用户。
• 语音合成API提供多种方法和属性来自定义语音输出，例如语言、语速和音调。此API还包括启动、暂停、恢复和停止语音合成过程的方法。
• 目前，语音合成API仅被Chrome 33完全支持，并且部分支持iOS 7的Safari浏览器。该API需要更广泛的浏览器支持才能在网站上实际应用。

几周前，我简要讨论了NLP及其相关技术。在处理自然语言时，需要考虑两个不同但互补的方面：自动语音识别 (ASR) 和文本转语音 (TTS)。在介绍Web语音API的文章中，我讨论了Web语音API，这是一个在Web浏览器中提供语音输入和文本转语音输出功能的API。您可能已经注意到，我只介绍了如何在网站上实现语音识别，而不是语音合成。在本文中，我们将填补这一空白，描述语音合成API。语音识别为用户，特别是残疾用户，提供了向网站提供信息的机会。回想一下我强调的用例：> 在网站上，用户可以使用语音导航页面或填充表单字段。用户也可以在驾驶时与页面交互，而无需将视线从道路上移开。这些都不是微不足道的用例。

因此，我们可以将其视为从用户到网站的通道。语音合成则相反，它使网站能够通过朗读文本为用户提供信息。这对于盲人以及通常视力障碍的人特别有用。语音合成的用例与语音识别一样多。想想一些新车中实现的系统，它们可以朗读您的文本或电子邮件，这样您就不必将视线从道路上移开。使用计算机的视障人士熟悉像JAWS这样的软件，这些软件可以朗读桌面上显示的任何内容，从而允许他们执行任务。这些应用程序很棒，但它们价格昂贵。借助语音合成API，我们可以帮助使用我们网站的人们，无论他们是否有残疾。例如，假设您正在撰写博客文章（就像我现在正在做的那样），为了提高其可读性，您将其分成几个段落。这不是使用语音合成API的好机会吗？事实上，我们可以对我们的网站进行编程，以便一旦用户将鼠标悬停在（或聚焦于）文本上，扬声器的图标就会出现在屏幕上。如果用户单击该图标，我们将调用一个函数来合成给定段落的文本。这是一个非微不足道的改进。更好的是，它对我们作为开发人员的开销非常低，对我们的用户没有任何开销。下面显示了此概念的基本实现。语音合成API演示现在我们对该API的用例有了更多了解，让我们了解其方法和属性。方法和属性语音合成API定义了一个名为SpeechSynthesis的接口，其结构在此处显示。与上一篇文章一样，本文不会涵盖规范中描述的所有属性和方法。原因是它太复杂，无法在一篇文章中涵盖。但是，我们将解释足够的元素，让您轻松理解未涵盖的元素。### SpeechSynthesisUtterance 对象我们需要了解的第一个对象是SpeechSynthesisUtterance对象。它表示合成器将朗读的语音（即文本）。此对象非常灵活，并且可以通过多种方式进行自定义。除了文本之外，我们还可以设置用于发音文本的语言、语速甚至音调。以下是其属性列表：- text – 指定要合成的语音（文本）的字符串。- lang – 表示语音合成语言的字符串（例如“en-GB”或“it-IT”）。- voiceURI – 指定语音合成语音和Web应用程序希望使用的语音合成服务的地址的字符串。- volume – 表示文本音量的数字。其范围从0（最小）到1（最大）（包括），默认值为1。- rate – 表示语音语速的数字。它相对于语音的默认速率而言。默认值为1。值为2表示语音将以默认速度的两倍朗读。不允许使用低于0.1或高于10的值。- pitch – 表示语音音调的数字。其范围从0（最小）到2（最大）（包括）。默认值为1。要实例化此对象，我们可以将要合成的文本作为构造函数参数传递，或者省略文本并在稍后设置它。以下代码是第一种情况的示例。// 创建语音对象var utterance = new SpeechSynthesisUtterance('My name is Aurelio De Rosa');第二种情况是构造SpeechSynthesisUtterance然后分配参数，如下所示。// 创建语音对象var utterance = new SpeechSynthesisUtterance();utterance.text = 'My name is Aurelio De Rosa';utterance.lang = 'it-IT';utterance.rate = 1.2;此对象公开的一些方法是：- onstart – 设置在合成开始时触发的回调。- onpause – 设置在语音合成暂停时触发的回调。- onresume – 设置在合成恢复时触发的回调。- onend – 设置在合成结束时触发的回调。SpeechSynthesisUtterance对象允许我们设置要朗读的文本以及配置其朗读方式。目前，我们只创建了表示语音的对象。我们仍然需要将其与合成器绑定。### SpeechSynthesis 对象SpeechSynthesis对象不需要实例化。它属于window对象，可以直接使用。此对象公开了一些方法，例如：- speak() – 接受SpeechSynthesisUtterance对象作为其唯一参数。此方法用于合成语音。- stop() – 立即终止合成过程。- pause() – 暂停合成过程。- resume() – 恢复合成过程。另一个有趣的方法是getVoices()。它不接受任何参数，用于检索特定浏览器可用的语音列表（数组）。列表中的每个条目都提供信息，例如名称、助记符名称（为开发人员提供语音提示，例如“Google US English”）、lang（语音的语言，例如it-IT）和voiceURI（此语音的语音合成服务的地址）。重要说明：在Chrome和Safari中，voiceURI属性名为voice。因此，我们将在本文中构建的演示使用voice而不是voiceURI。浏览器兼容性不幸的是，在撰写本文时，唯一支持语音合成API的浏览器是Chrome 33（完全支持）和iOS 7的Safari（部分支持）。演示本节提供了语音合成API的简单演示。此页面允许您输入一些文本并将其合成。此外，还可以设置您想要使用的速率、音调和语言。您还可以随时使用提供的相应按钮停止、暂停或恢复文本的合成。在将侦听器附加到按钮之前，因为对该API的支持非常有限，所以我们对实现进行测试。通常，测试非常简单，包括以下代码：if (window.SpeechSynthesisUtterance === undefined) { // 不支持} else { // 读取我的文本}如果测试失败，我们将向用户显示消息“API不支持”。一旦验证了支持，我们就会在标记中放入的特定选择框中动态加载可用的语音。请注意，Chrome中的getVoices()方法存在问题（#340160）。因此，我使用setInterval()为此创建了一个解决方法。然后，我们为每个按钮附加一个处理程序，以便它们可以调用其特定操作（播放、停止等）。此处提供了代码的实时演示。此外，此演示以及我迄今为止构建的所有其他演示都可以在我的HTML5 API演示存储库中找到。```

charset="UTF-8"> name="viewport" content="width=device-width, initial-scale=1.0"/>

Speech Synthesis API Demo>

• { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

<code>  body
  {
    max-width: 500px;
    margin: 2em auto;
    padding: 0 0.5em;
    font-size: 20px;
  }

  h1,
  .buttons-wrapper
  {
    text-align: center;
  }

  .hidden
  {
    display: none;
  }

  #text,
  #log
  {
    display: block;
    width: 100%;
    height: 5em;
    overflow-y: scroll;
    border: 1px solid #333333;
    line-height: 1.3em;
  }

  .field-wrapper
  {
    margin-top: 0.2em;
  }

  .button-demo
  {
    padding: 0.5em;
    display: inline-block;
    margin: 1em auto;
  }
></code>

>

Speech Synthesis API>

<code><h3 id="gt">></h3>Play area>
 action="" method="get">
  <label> for="text"></label>Text:>
   id="text">>
  <div> class="field-wrapper">
    <label> for="voice"></label>Voice:>
     id="voice">>
  </div>>
  <div> class="field-wrapper">
    <label> for="rate"></label>Rate (0.1 - 10):>
     type="number" id="rate" min="0.1" max="10" value="1" step="any" />
  </div>>
  <div> class="field-wrapper">
    <label> for="pitch"></label>Pitch (0.1 - 2):>
     type="number" id="pitch" min="0.1" max="2" value="1" step="any" />
  </div>>
  <div> class="buttons-wrapper">
     id="button-speak-ss" class="button-demo">Speak>
     id="button-stop-ss" class="button-demo">Stop>
     id="button-pause-ss" class="button-demo">Pause>
     id="button-resume-ss" class="button-demo">Resume>
  </div>>
>

 id="ss-unsupported" class="hidden">API not supported>

<h3 id="gt">></h3>Log>
<div> id="log"></div>>
 id="clear-all" class="button-demo">Clear all>

>
  // Test browser support
  if (window.SpeechSynthesisUtterance === undefined) {
    document.getElementById('ss-unsupported').classList.remove('hidden');
    ['button-speak-ss', 'button-stop-ss', 'button-pause-ss', 'button-resume-ss'].forEach(function(elementId) {
      document.getElementById(elementId).setAttribute('disabled', 'disabled');
    });
  } else {
    var text = document.getElementById('text');
    var voices = document.getElementById('voice');
    var rate = document.getElementById('rate');
    var pitch = document.getElementById('pitch');
    var log = document.getElementById('log');

    // Workaround for a Chrome issue (#340160 - https://code.google.com/p/chromium/issues/detail?id=340160)
    var watch = setInterval(function() {
      // Load all voices available
      var voicesAvailable = speechSynthesis.getVoices();

      if (voicesAvailable.length !== 0) {
        for(var i = 0; i               voices.innerHTML += '                                  'data-voice-uri="' + voicesAvailable[i].voiceURI + '">' +
                              voicesAvailable[i].name +
                              (voicesAvailable[i].default ? ' (default)' : '') + '';
        }

        clearInterval(watch);
      }
    }, 1);

    document.getElementById('button-speak-ss').addEventListener('click', function(event) {
      event.preventDefault();

      var selectedVoice = voices.options[voices.selectedIndex];

      // Create the utterance object setting the chosen parameters
      var utterance = new SpeechSynthesisUtterance();

      utterance.text = text.value;
      utterance.voice = selectedVoice.getAttribute('data-voice-uri');
      utterance.lang = selectedVoice.value;
      utterance.rate = rate.value;
      utterance.pitch = pitch.value;

      utterance.onstart = function() {
        log.innerHTML = 'Speaker started' + '<br>' + log.innerHTML;
      };

      utterance.onend = function() {
        log.innerHTML = 'Speaker finished' + '<br>' + log.innerHTML;
      };

      window.speechSynthesis.speak(utterance);
    });

    document.getElementById('button-stop-ss').addEventListener('click', function(event) {
      event.preventDefault();

      window.speechSynthesis.cancel();
      log.innerHTML = 'Speaker stopped' + '<br>' + log.innerHTML;
    });

    document.getElementById('button-pause-ss').addEventListener('click', function(event) {
      event.preventDefault();

      window.speechSynthesis.pause();
      log.innerHTML = 'Speaker paused' + '<br>' + log.innerHTML;
    });

    document.getElementById('button-resume-ss').addEventListener('click', function(event) {
      event.preventDefault();

      if (window.speechSynthesis.paused === true) {
        window.speechSynthesis.resume();
        log.innerHTML = 'Speaker resumed' + '<br>' + log.innerHTML;
      } else {
        log.innerHTML = 'Unable to resume. Speaker is not paused.' + '<br>' + log.innerHTML;
      }
    });

    document.getElementById('clear-all').addEventListener('click', function() {
      log.textContent = '';
    });
  }
></code>

结论

本文介绍了语音合成API。这是一个合成文本并改善我们网站用户（尤其是视障用户）整体体验的API。正如我们所看到的，此API公开了多个对象、方法和属性，但使用起来并不困难。不幸的是，目前其浏览器支持非常差，Chrome和Safari是唯一支持它的浏览器。希望更多浏览器会效仿，让您能够实际考虑在您的网站上使用它。我已经决定这么做了。别忘了玩演示，如果您喜欢这篇文章，请发表评论。我真的很想听听您的意见。关于网页和语音合成API的常见问题 (FAQ)

什么是语音合成API，它是如何工作的？

语音合成API是一个基于Web的接口，允许开发人员将文本转语音功能集成到他们的应用程序中。它的工作原理是使用计算机生成的语音将书面文本转换为口语单词。这是通过将文本分解成语音成分，然后将这些成分合成成语音来实现的。该API提供了一系列语音和语言供选择，允许开发人员自定义语音输出以满足他们的需求。

我如何在Web应用程序中实现语音合成API？

在您的Web应用程序中实现语音合成API涉及几个步骤。首先，您需要创建一个新的SpeechSynthesisUtterance实例，并将其text属性设置为要朗读的文本。然后，您可以设置其他属性，例如语音、音调和速率，来自定义语音输出。最后，调用SpeechSynthesis接口的speak方法来启动语音合成。

我可以自定义语音输出的语音和语言吗？

是的，语音合成API提供了一系列您可以选择的语音和语言。您可以通过设置SpeechSynthesisUtterance实例的voice和lang属性来设置语音和语言。该API还允许您调整语音的音调和速率以进一步自定义输出。

语音合成API的局限性是什么？

虽然语音合成API是一个强大的工具，但它确实有一些局限性。例如，语音和语言的可用性可能因浏览器和操作系统而异。此外，语音输出的质量可能会有所不同，并且可能并不总是听起来很自然。此外，该API不提供对特定单词或短语的发音的控制。

如何在使用语音合成API时处理错误？

语音合成API提供了一个错误事件，您可以监听该事件。在语音合成过程中发生错误时，将触发此事件。您可以通过向SpeechSynthesisUtterance实例添加事件侦听器并提供将在触发事件时调用的回调函数来处理此事件。

我可以暂停和恢复语音输出吗？

是的，语音合成API提供了暂停和恢复方法，您可以使用这些方法来控制语音输出。您可以调用SpeechSynthesis接口上的这些方法来暂停和恢复语音。

语音合成API在所有浏览器中都受支持吗？

语音合成API在大多数现代浏览器中都受支持，包括Chrome、Firefox、Safari和Edge。但是，语音和语言的可用性可能因浏览器和操作系统而异。

我可以在移动应用程序中使用语音合成API吗？

是的，语音合成API可以在移动应用程序中使用。但是，语音和语言的可用性可能因移动操作系统而异。

如何测试语音合成API？

您可以通过创建一个使用API将书面文本转换为语音的简单网页来测试语音合成API。然后，您可以尝试不同的语音、语言、音调和速率，看看它们如何影响语音输出。

在哪里可以找到有关语音合成API的更多信息？

您可以在万维网联盟 (W3C) 提供的官方文档中找到有关语音合成API的更多信息。还有许多在线教程和文章提供了有关如何使用该API的详细解释和示例。

以上是说话的网页和语音综合API的详细内容。更多信息请关注PHP中文网其他相关文章！