说话的网页和语音综合API-js教程-PHP中文网

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

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

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

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

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

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

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

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

如何测试语音合成API？

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

首页

web前端

js教程

说话的网页和语音综合API

William Shakespeare

Feb 22, 2025 am 09:23 AM

Talking Web Pages and the Speech Synthesis 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方法来启动语音合成。