核心要點(diǎn)

• 語音合成API允許網(wǎng)站通過朗讀文本為用戶提供信息，這可以極大地幫助視障用戶和多任務(wù)處理的用戶。
• 語音合成API提供多種方法和屬性來自定義語音輸出，例如語言、語速和音調(diào)。此API還包括啟動、暫停、恢復(fù)和停止語音合成過程的方法。
• 目前，語音合成API僅被Chrome 33完全支持，並且部分支持iOS 7的Safari瀏覽器。該API需要更廣泛的瀏覽器支持才能在網(wǎng)站上實(shí)際應(yīng)用。

幾週前，我簡要討論了NLP及其相關(guān)技術(shù)。在處理自然語言時(shí)，需要考慮兩個(gè)不同但互補(bǔ)的方面：自動語音識別 (ASR) 和文本轉(zhuǎn)語音 (TTS)。在介紹Web語音API的文章中，我討論了Web語音API，這是一個(gè)在Web瀏覽器中提供語音輸入和文本轉(zhuǎn)語音輸出功能的API。您可能已經(jīng)註意到，我只介紹瞭如何在網(wǎng)站上實(shí)現(xiàn)語音識別，而不是語音合成。在本文中，我們將填補(bǔ)這一空白，描述語音合成API。語音識別為用戶，特別是殘疾用戶，提供了向網(wǎng)站提供信息的機(jī)會?；叵胍幌挛覐?qiáng)調(diào)的用例：> 在網(wǎng)站上，用戶可以使用語音導(dǎo)航頁面或填充表單字段。用戶也可以在駕駛時(shí)與頁面交互，而無需將視線從道路上移開。這些都不是微不足道的用例。

因此，我們可以將其視為從用戶到網(wǎng)站的通道。語音合成則相反，它使網(wǎng)站能夠通過朗讀文本為用戶提供信息。這對於盲人以及通常視力障礙的人特別有用。語音合成的用例與語音識別一樣多。想想一些新車中實(shí)現(xiàn)的系統(tǒng)，它們可以朗讀您的文本或電子郵件，這樣您就不必將視線從道路上移開。使用計(jì)算機(jī)的視障人士熟悉像JAWS這樣的軟件，這些軟件可以朗讀桌面上顯示的任何內(nèi)容，從而允許他們執(zhí)行任務(wù)。這些應(yīng)用程序很棒，但它們價(jià)格昂貴。借助語音合成API，我們可以幫助使用我們網(wǎng)站的人們，無論他們是否有殘疾。例如，假設(shè)您正在撰寫博客文章（就像我現(xiàn)在正在做的那樣），為了提高其可讀性，您將其分成幾個(gè)段落。這不是使用語音合成API的好機(jī)會嗎？事實(shí)上，我們可以對我們的網(wǎng)站進(jìn)行編程，以便一旦用戶將鼠標(biāo)懸停在（或聚焦於）文本上，揚(yáng)聲器的圖標(biāo)就會出現(xiàn)在屏幕上。如果用戶單擊該圖標(biāo)，我們將調(diào)用一個(gè)函數(shù)來合成給定段落的文本。這是一個(gè)非微不足道的改進(jìn)。更好的是，它對我們作為開發(fā)人員的開銷非常低，對我們的用戶沒有任何開銷。下面顯示了此概念的基本實(shí)現(xiàn)。語音合成API演示現(xiàn)在我們對該API的用例有了更多了解，讓我們了解其方法和屬性。方法和屬性語音合成API定義了一個(gè)名為SpeechSynthesis的接口，其結(jié)構(gòu)在此處顯示。與上一篇文章一樣，本文不會涵蓋規(guī)範(fàn)中描述的所有屬性和方法。原因是它太複雜，無法在一篇文章中涵蓋。但是，我們將解釋足夠的元素，讓您輕鬆理解未涵蓋的元素。 ### SpeechSynthesisUtterance 對像我們需要了解的第一個(gè)對像是SpeechSynthesisUtterance對象。它表示合成器將朗讀的語音（即文本）。此對象非常靈活，並且可以通過多種方式進(jìn)行自定義。除了文本之外，我們還可以設(shè)置用於發(fā)音文本的語言、語速甚至音調(diào)。以下是其屬性列表：- text – 指定要合成的語音（文本）的字符串。 - lang – 表示語音合成語言的字符串（例如“en-GB”或“it-IT”）。 - voiceURI – 指定語音合成語音和Web應(yīng)用程序希望使用的語音合成服務(wù)的地址的字符串。 - volume – 表示文本音量的數(shù)字。其範(fàn)圍從0（最?。┑?（最大）（包括），默認(rèn)值為1。 - rate – 表示語音語速的數(shù)字。它相對於語音的默認(rèn)速率而言。默認(rèn)值為1。值為2表示語音將以默認(rèn)速度的兩倍朗讀。不允許使用低於0.1或高於10的值。 - pitch – 表示語音音調(diào)的數(shù)字。其範(fàn)圍從0（最小）到2（最大）（包括）。默認(rèn)值為1。要實(shí)例化此對象，我們可以將要合成的文本作為構(gòu)造函數(shù)參數(shù)傳遞，或者省略文本並在稍後設(shè)置它。以下代碼是第一種情況的示例。// 創(chuàng)建語音對象var utterance = new SpeechSynthesisUtterance('My name is Aurelio De Rosa');第二種情況是構(gòu)造SpeechSynthesisUtterance然後分配參數(shù)，如下所示。 // 創(chuàng)建語音對象var utterance = new SpeechSynthesisUtterance();utterance.text = 'My name is Aurelio De Rosa';utterance.lang = 'it-IT';utterance.rate = 1.2;此對象公開的一些方法是：- onstart – 設(shè)置在合成開始時(shí)觸發(fā)的回調(diào)。 - onpause – 設(shè)置在語音合成暫停時(shí)觸發(fā)的回調(diào)。 - onresume – 設(shè)置在合成恢復(fù)時(shí)觸發(fā)的回調(diào)。 - onend – 設(shè)置在合成結(jié)束時(shí)觸發(fā)的回調(diào)。 SpeechSynthesisUtterance對象允許我們設(shè)置要朗讀的文本以及配置其朗讀方式。目前，我們只創(chuàng)建了表示語音的對象。我們?nèi)匀恍枰獙⑵渑c合成器綁定。 ### SpeechSynthesis 對象SpeechSynthesis對像不需要實(shí)例化。它屬於window對象，可以直接使用。此對象公開了一些方法，例如：- speak() – 接受SpeechSynthesisUtterance對像作為其唯一參數(shù)。此方法用於合成語音。 - stop() – 立即終止合成過程。 - pause() – 暫停合成過程。 - resume() – 恢復(fù)合成過程。另一個(gè)有趣的方法是getVoices()。它不接受任何參數(shù)，用於檢索特定瀏覽器可用的語音列表（數(shù)組）。列表中的每個(gè)條目都提供信息，例如名稱、助記符名稱（為開發(fā)人員提供語音提示，例如“Google US English”）、lang（語音的語言，例如it-IT）和voiceURI（此語音的語音合成服務(wù)的地址）。重要說明：在Chrome和Safari中，voiceURI屬性名為voice。因此，我們將在本文中構(gòu)建的演示使用voice而不是voiceURI。瀏覽器兼容性不幸的是，在撰寫本文時(shí)，唯一支持語音合成API的瀏覽器是Chrome 33（完全支持）和iOS 7的Safari（部分支持）。演示本節(jié)提供了語音合成API的簡單演示。此頁面允許您輸入一些文本並將其合成。此外，還可以設(shè)置您想要使用的速率、音調(diào)和語言。您還可以隨時(shí)使用提供的相應(yīng)按鈕停止、暫?；蚧謴?fù)文本的合成。在將偵聽器附加到按鈕之前，因?yàn)閷υ揂PI的支持非常有限，所以我們對實(shí)現(xiàn)進(jìn)行測試。通常，測試非常簡單，包括以下代碼：if (window.SpeechSynthesisUtterance === undefined) { // 不支持} else { // 讀取我的文本}如果測試失敗，我們將向用戶顯示消息“API不支持”。一旦驗(yàn)證了支持，我們就會在標(biāo)記中放入的特定選擇框中動態(tài)加載可用的語音。請注意，Chrome中的getVoices()方法存在問題（#340160）。因此，我使用setInterval()為此創(chuàng)建了一個(gè)解決方法。然後，我們?yōu)槊總€(gè)按鈕附加一個(gè)處理程序，以便它們可以調(diào)用其特定操作（播放、停止等）。此處提供了代碼的實(shí)時(shí)演示。此外，此演示以及我迄今為止構(gòu)建的所有其他演示都可以在我的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>></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>></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>

結(jié)論

本文介紹了語音合成API。這是一個(gè)合成文本並改善我們網(wǎng)站用戶（尤其是視障用戶）整體體驗(yàn)的API。正如我們所看到的，此API公開了多個(gè)對象、方法和屬性，但使用起來並不困難。不幸的是，目前其瀏覽器支持非常差，Chrome和Safari是唯一支持它的瀏覽器。希望更多瀏覽器會效仿，讓您能夠?qū)嶋H考慮在您的網(wǎng)站上使用它。我已經(jīng)決定這麼做了。別忘了玩演示，如果您喜歡這篇文章，請發(fā)表評論。我真的很想聽聽您的意見。關(guān)於網(wǎng)頁和語音合成API的常見問題 (FAQ)

什麼是語音合成API，它是如何工作的？

語音合成API是一個(gè)基於Web的接口，允許開發(fā)人員將文本轉(zhuǎn)語音功能集成到他們的應(yīng)用程序中。它的工作原理是使用計(jì)算機(jī)生成的語音將書面文本轉(zhuǎn)換為口語單詞。這是通過將文本分解成語音成分，然後將這些成分合成成語音來實(shí)現(xiàn)的。該API提供了一系列語音和語言供選擇，允許開發(fā)人員自定義語音輸出以滿足他們的需求。

我如何在Web應(yīng)用程序中實(shí)現(xiàn)語音合成API？

在您的Web應(yīng)用程序中實(shí)現(xiàn)語音合成API涉及幾個(gè)步驟。首先，您需要?jiǎng)?chuàng)建一個(gè)新的SpeechSynthesisUtterance實(shí)例，並將其text屬性設(shè)置為要朗讀的文本。然後，您可以設(shè)置其他屬性，例如語音、音調(diào)和速率，來自定義語音輸出。最後，調(diào)用SpeechSynthesis接口的speak方法來啟動語音合成。

我可以自定義語音輸出的語音和語言嗎？

是的，語音合成API提供了一系列您可以選擇的語音和語言。您可以通過設(shè)置SpeechSynthesisUtterance實(shí)例的voice和lang屬性來設(shè)置語音和語言。該API還允許您調(diào)整語音的音調(diào)和速率以進(jìn)一步自定義輸出。

語音合成API的局限性是什麼？

雖然語音合成API是一個(gè)強(qiáng)大的工具，但它確實(shí)有一些局限性。例如，語音和語言的可用性可能因?yàn)g覽器和操作系統(tǒng)而異。此外，語音輸出的質(zhì)量可能會有所不同，並且可能並不總是聽起來很自然。此外，該API不提供對特定單詞或短語的發(fā)音的控制。

如何在使用語音合成API時(shí)處理錯(cuò)誤？

語音合成API提供了一個(gè)錯(cuò)誤事件，您可以監(jiān)聽該事件。在語音合成過程中發(fā)生錯(cuò)誤時(shí)，將觸發(fā)此事件。您可以通過向SpeechSynthesisUtterance實(shí)例添加事件偵聽器並提供將在觸發(fā)事件時(shí)調(diào)用的回調(diào)函數(shù)來處理此事件。

我可以暫停和恢復(fù)語音輸出嗎？

是的，語音合成API提供了暫停和恢復(fù)方法，您可以使用這些方法來控制語音輸出。您可以調(diào)用SpeechSynthesis接口上的這些方法來暫停和恢復(fù)語音。

語音合成API在所有瀏覽器中都受支持嗎？

語音合成API在大多數(shù)現(xiàn)代瀏覽器中都受支持，包括Chrome、Firefox、Safari和Edge。但是，語音和語言的可用性可能因?yàn)g覽器和操作系統(tǒng)而異。

我可以在移動應(yīng)用程序中使用語音合成API嗎？

是的，語音合成API可以在移動應(yīng)用程序中使用。但是，語音和語言的可用性可能因移動操作系統(tǒng)而異。

如何測試語音合成API？

您可以通過創(chuàng)建一個(gè)使用API將書面文本轉(zhuǎn)換為語音的簡單網(wǎng)頁來測試語音合成API。然後，您可以嘗試不同的語音、語言、音調(diào)和速率，看看它們?nèi)绾斡绊懻Z音輸出。

在哪裡可以找到有關(guān)語音合成API的更多信息？

您可以在萬維網(wǎng)聯(lián)盟 (W3C) 提供的官方文檔中找到有關(guān)語音合成API的更多信息。還有許多在線教程和文章提供了有關(guān)如何使用該API的詳細(xì)解釋和示例。

以上是說話的網(wǎng)頁和語音綜合API的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！