api语音合成

几周前，我简要讨论了NLP及其相关技术。 在处理自然语言时，要考虑两个不同但互补的方面：自动语音识别（ ASR ）和文本转语音（ TTS ）。 在介绍Web语音API的文章中，我讨论了Web语音API，这是一种在Web浏览器中提供语音输入和文本到语音输出功能的API。 您可能已经注意到，我只介绍了如何在网站中实现语音识别，而不是语音合成。 在本文中，我们将填补描述语音合成API的空白。

语音识别为用户（尤其是残障人士）提供了向网站提供信息的机会。 回顾我强调的用例：

在网站中，用户可以使用自己的声音浏览页面或填充表单字段。 用户也可以在驾驶时与页面进行交互，而不会将视线移开。 这些不是平凡的用例。

因此，我们可以将其视为从用户到网站的渠道。 语音合成是另一种方式，使网站能够通过阅读文本向用户提供信息。 这对于盲人以及通常有视力障碍的人特别有用。

语音合成具有与语音识别一样多的用例。 想想看，在一些新车中实现的系统会读取您的文本或电子邮件，这样您就不必将视线移开。 使用计算机的视力障碍人士熟悉JAWS之类的软件，该软件可以读取桌面上的所有内容，从而使他们能够执行任务。 这些应用程序很棒，但是花费很多钱。 多亏了语音合成API，我们可以帮助人们使用我们的网站，无论他们身在何处。

例如，假设您正在博客上写文章（就像我现在所做的那样），为了提高其可读性，您将其分为几段。 这不是使用语音合成API的好机会吗？ 实际上，我们可以对我们的网站进行编程，以便一旦用户将鼠标悬停在（或专注于）文本上时，屏幕上就会出现一个扬声器图标。 如果用户单击该图标，我们将调用一个函数，该函数将合成给定段落的文本。 这是不平凡的改进。 更好的是，对于我们作为开发人员而言，它的开销非常低，对用户而言则没有开销。 下面的JS Bin中显示了此概念的基本实现。

语音合成API演示
现在，我们进一步了解了此API的用例，让我们了解其方法和属性。

方法和属性

语音合成API定义了一个称为SpeechSynthesis的接口，其结构在此处介绍。 像上一篇文章一样，本文不会涵盖规范中描述的所有属性和方法。 原因是它太复杂而无法在一篇文章中介绍。 但是，我们将解释足够的元素，以使您轻松理解那些未涵盖的内容。

SpeechSynthesisUtterance对象

我们需要学习的第一个对象是SpeechSynthesisUtterance对象。 它代表合成器将要说的话语（即文本）。 该对象非常灵活，可以通过多种方式自定义。 除文本外，我们还可以设置用于发音的语言，速度甚至音高。 以下是其属性的列表：

  • text –一个字符串，指定要合成的语音（文本）。
  • lang –表示语音合成语音的语言的字符串（例如“ en-GB”或“ it-IT”）。
  • voiceURI –一个字符串，它指定语音合成语音和Web应用程序希望使用的语音合成服务的位置。
  • volume –代表文本volume的数字。 取值范围是0（最小值）到1（最大值），且默认值为1。
  • rate –一个数字，表示发声的说话率。 它与语音的默认速率有关。 默认值是1。值2表示发声的速度是默认速度的两倍。 小于0.1或大于10的值是不允许的。
  • pitch –代表发声的pitch的数字。 范围从0（最小）到2（最大）。 预设值是1。

要实例化此对象，我们可以将文本传递给synthesize作为构造函数参数，也可以忽略该文本并在以后进行设置。 以下代码是第一种情况的示例。 

// Create the utterance object
var utterance = new SpeechSynthesisUtterance('My name is Aurelio De Rosa');

下面显示了第二种情况，该情况构造了SpeechSynthesisUtterance ，然后分配了参数。 

// Create the utterance object
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对象允许我们设置SpeechSynthesisUtterance的文本以及配置说的方式。 目前，我们仅创建了代表话语的对象。 我们仍然需要将其绑定到合成器。

SpeechSynthesis对象

SpeechSynthesis对象不需要实例化。 它属于window对象，可以直接使用。 该对象公开了几种方法，例如：

  • SpeechSynthesisUtterance speak() –接受SpeechSynthesisUtterance对象作为其唯一参数。 此方法用于合成话语。
  • stop() –立即终止综合过程。
  • pause() –暂停综合过程。
  • resume() –恢复综合过程。

另一个有趣的方法是getVoices() 。 它不接受任何参数，用于检索特定浏览器可用的语音列表（数组）。 列表中的每个条目都提供诸如name ，助记符名称之类的信息，以便为开发人员提供语音提示（例如“ Google US English”）， lang ，语音语言（例如it-IT）和voiceURI ，此语音的语音合成服务的位置。

重要说明 ：在Chrome和Safari中， voiceURI属性改为名为voice 。 因此，我们将在本文中构建的演示使用voice而不是voiceURI 。

浏览器兼容性

不幸的是，在撰写本文时，唯一支持语音合成API的浏览器是具有完全支持的Chrome 33和具有部分支持的Safari for iOS 7。

演示版

本部分提供了语音合成API的简单演示。 该页面允许您输入一些文本并进行合成。 此外，还可以设置速率，音高和您要使用的语言。 您还可以随时使用提供的相应按钮停止，暂停或恢复文本的合成。

在将侦听器附加到按钮之前，由于对此API的支持非常有限，我们对实现进行测试。 像往常一样，测试非常简单，由以下代码组成： 

if (window.SpeechSynthesisUtterance === undefined) {
  // Not supported
} else {
  // Read my text
}

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

如果测试失败，我们会向用户显示消息“不支持API”。 验证支持后，我们会在标记中放置的特定选择框中动态加载可用的语音。 请注意，Chrome中的getVoices()方法存在问题（ ＃340160 ）。 因此，我使用setInterval()为它创建了一种解决方法。 然后，我们为每个按钮附加一个处理程序，以便它们可以调用其特定的动作（播放，停止等）。

此处提供了代码的实时演示。 另外，该演示以及到目前为止我已经构建的所有其他演示都可以在我的HTML5 API演示存储库中找到。 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Speech Synthesis API Demo</title>
    <style>
      *
      {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
      }

      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;
      }
    </style>
  </head>
  <body>
    <h1>Speech Synthesis API</h1>

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

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

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

    <script>
      // 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 < voicesAvailable.length; i++) {
              voices.innerHTML += '<option value="' + voicesAvailable[i].lang + '"' +
                                  'data-voice-uri="' + voicesAvailable[i].voiceURI + '">' +
                                  voicesAvailable[i].name +
                                  (voicesAvailable[i].default ? ' (default)' : '') + '</option>';
            }

            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 = '';
        });
      }
    </script>
  </body>
</html>

结论

在本文中，我们介绍了语音合成API。 这是一个API，可以为我们的网站用户（尤其是有视觉障碍的用户）合成文本并改善其整体体验。 如我们所见，该API公开了多个对象，方法和属性，但是使用起来并不难。 不幸的是，目前它的浏览器支持非常差，Chrome和Safari是唯一支持它的浏览器。

希望有更多的浏览器会效仿这种领导方式，让您切实考虑在网站上使用它。 我决定了 如果您喜欢这篇文章，请不要忘了演示该示例并发表评论。 我真的很想听听您的意见。

翻译自: https://www.sitepoint.com/talking-web-pages-and-the-speech-synthesis-api/

api语音合成

# python # javascript # java # css
Logo
CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

cover

用 OpenAI Assistants 做大模型应用开发

avatar CSDN学习社区
cover

1 小时解读鸿蒙 10 大热点问题

avatar CSDN学习社区
cover

1 小时解读鸿蒙 10 大热点问题

avatar CSDN学习社区