Kernpunkte

• Die Voice -Synthese -API erm?glicht es der Website, Benutzern Informationen zu geben, indem sie Text vorlesen, die sehbehinderte Benutzer und Multitasking -Benutzer erheblich helfen k?nnen.
• Die Voice -Synthese -API bietet eine Vielzahl von Methoden und Attributen, um die Sprachausgabe anzupassen, z. B. Sprache, Sprachgeschwindigkeit und Ton. Diese API enth?lt auch Methoden, um den Sprachsyntheseprozess zu starten, zu pausieren, wieder aufzunehmen und zu stoppen.
• Derzeit wird die Voice -Synthese -API nur vollst?ndig von Chrome 33 unterstützt und unterstützt den Safari -Browser für iOS 7 teilweise. Diese API erfordert eine breitere Browser -Unterstützung, um praktisch auf der Website angewendet zu werden.

Vor ein paar Wochen habe ich kurz über NLP und seine verwandten Technologien diskutiert. Beim Umgang mit natürlicher Sprache müssen zwei unterschiedliche, aber komplement?re Aspekte berücksichtigt werden: Automatische Spracherkennung (ASR) und Text-to-Speech (TTS). In einem Artikel, in dem die Web-Voice-API vorgestellt wurde, habe ich die Web-Voice-API, eine API, besprochen, die in einem Webbrowser Spracheingabe- und Text-to-Speech-Ausgangsfunktionen bietet. M?glicherweise haben Sie festgestellt, dass ich nur abgedeckt habe, wie man Spracherkennung auf einer Website und nicht auf der Sprachsynthese implementiert. In diesem Artikel werden wir diese Lücke füllen und die Sprachsynthese -API beschreiben. Die Spracherkennung bietet der Website, insbesondere bei Behinderungen, Informationen zur Website zur Verfügung gestellt. Erinnern Sie sich an die Anwendungsf?lle, die ich betone: & GT; Benutzer k?nnen auch mit der Seite interagieren, w?hrend sie fahren, ohne sich von der Stra?e zu befassen. Keine davon sind triviale Anwendungsf?lle.

Daher k?nnen wir es uns als Kanal vom Benutzer zur Website vorstellen. Die phonetische Synthese erm?glicht es der Website im Gegenteil, den Benutzern Informationen durch Lesen von Text vorzulegen. Dies ist besonders nützlich für Menschen mit Blindheit und oft Menschen mit Sehbehinderung. Es gibt so viele Anwendungsf?lle für die Sprachsynthese wie die Spracherkennung. Denken Sie an einige Systeme, die in neuen Autos implementiert sind, die Ihren Text oder Ihre E -Mail lesen k?nnen, damit Sie Ihre Augen nicht von der Stra?e ablenken müssen. Visuell beeintr?chtigte Personen, die Computer verwenden, sind mit Software wie Jaws vertraut, die alles auf dem Desktop vorlesen k?nnen, sodass sie Aufgaben ausführen k?nnen. Diese Apps sind gro?artig, aber sie sind teuer. Mit der Voice -Synthese -API k?nnen wir Menschen helfen, die unsere Website nutzen, unabh?ngig davon, ob sie eine Behinderung haben oder nicht. Angenommen, Sie schreiben einen Blog -Beitrag (wie ich es jetzt mache), und um ihn lesbar zu machen, teilen Sie ihn in Abs?tze auf. Ist das nicht eine gute Gelegenheit, eine API der Sprachsynthese zu verwenden? Tats?chlich k?nnen wir unsere Website so programmieren, dass das Symbol des Sprechers auf dem Bildschirm angezeigt wird, sobald der Benutzer den Text überbessert (oder konzentriert). Wenn der Benutzer auf das Symbol klickt, werden wir eine Funktion aufrufen, um den Text des angegebenen Absatzes zu synthetisieren. Dies ist eine nicht triviale Verbesserung. Noch besser ist es, dass es für uns als Entwickler einen sehr geringen Overhead und keinen Overhead für unsere Benutzer hat. Die grundlegende Implementierung dieses Konzepts ist unten gezeigt. Voice -Synthese -API -Demonstration Jetzt haben wir ein besseres Verst?ndnis der Anwendungsf?lle dieser API, sodass wir ihre Methoden und Eigenschaften verstehen k?nnen. Die Methode und Attribut -Sprachsynthese -API definiert eine Schnittstelle namens Sprachsynthese, deren Struktur hier gezeigt wird. Wie im vorherigen Artikel behandelt dieser Artikel nicht alle in der Spezifikation beschriebenen Eigenschaften und Methoden. Der Grund dafür ist, dass es zu komplex ist, um es in einem Artikel abzudecken. Wir werden jedoch genügend Elemente erkl?ren, um es Ihnen leicht zu machen, die nicht abgedeckten Elemente zu verstehen. ### RedeSySynthesiterance -Objekt Das erste Objekt, das wir wissen müssen, ist das Sprach -Synthesiterance -Objekt. Es repr?sentiert die Aussprache (d. H. Text), dass der Synthesizer laut vorlesen wird. Dieses Objekt ist sehr flexibel und kann auf verschiedene Weise angepasst werden. Zus?tzlich zum Text k?nnen wir auch die Sprache, Sprachgeschwindigkeit und sogar den Ton für den Aussprechen von Text festlegen. Hier ist seine Attributliste: - Text - Eine Zeichenfolge, die die zu synthetisierte Sprache (Text) angibt. -Lang-Eine Zeichenfolge, die eine Sprachsynthesesprache darstellt (wie "en-gb" oder "it-it"). - Voiceuri - Eine Zeichenfolge, die die Adresse des Sprachsynthesis -Dienstes angibt, den die Webanwendung verwenden m?chte. - Volumen - Eine Zahl, die das Volumen des Textes darstellt. Es reicht von 0 (mindestens) bis 1 (maximal) (einschlie?lich) und der Standardwert ist 1. - Rate - die Zahl, die die Sprachgeschwindigkeit darstellt. Es ist relativ zur Standard -Sprachrate. Der Standardwert ist 1. Ein Wert von 2 bedeutet, dass die Rede mit der doppelten Standardgeschwindigkeit doppelt so hoch ist. Werte unter 0,1 oder über 10 sind nicht zul?ssig. - Tonh?he - Die Zahl, die den Ton der Stimme darstellt. Es reicht von 0 (mindestens) bis 2 (maximal) (inklusiv). Der Standardwert ist 1. Um dieses Objekt zu instanziieren, k?nnen wir den Text übergeben, der als Konstruktorparameter synthetisiert werden soll, oder den Text weglassen und sp?ter festlegen. Der folgende Code ist ein Beispiel für den ersten Fall.// 創(chuàng)建語(yǔ)音對(duì)象var utterance = new SpeechSynthesisUtterance('My name is Aurelio De Rosa'); Der zweite Fall besteht darin, die Sprachsynthesideranz zu konstruieren und Parameter wie unten gezeigt zuzuweisen. // 創(chuàng)建語(yǔ)音對(duì)象var utterance = new SpeechSynthesisUtterance();utterance.text = 'My name is Aurelio De Rosa';utterance.lang = 'it-IT';utterance.rate = 1.2; Einige Methoden, die dieses Objekt ausgesetzt sind, sind: - OnStart - Setzen Sie den Rückruf, der zu Beginn der Synthese ausgel?st wird. - Onpause - Legt den Rückruf aus, der ausgel?st wird, wenn die Sprachsynthese angehalten wird. - ONRESUME - Legt den Rückruf fest, der ausgel?st wird, wenn die Komposition wiederhergestellt wird. - OneSend - Legt den Rückruf fest, der am Ende der Komposition ausgel?st wird. Mit dem Sprach -Synthesiterance -Objekt k?nnen wir den Text festlegen und so konfigurieren, wie er laut gelesen wird. Derzeit haben wir nur Objekte erstellt, die Sprache darstellen. Wir müssen es noch an den Synthesizer binden. ### Sprachsynthesis -Objekt Das Sprachsynthesis -Objekt muss nicht instanziiert werden. Es geh?rt zu einem Fensterobjekt und kann direkt verwendet werden. Dieses Objekt enth?lt einige Methoden, wie z. Diese Methode wird verwendet, um die Sprache zu synthetisieren. - Stop () - Stop den Syntheseprozess sofort. - Pause () - Pause den Syntheseprozess. - Resume () - wieder aufnehmen den Syntheseprozess. Ein weiterer interessanter Weg ist GetVoices (). Es akzeptiert keine Parameter und wird verwendet, um eine Liste von Stimmen (Arrays) abzurufen, die einem bestimmten Browser zur Verfügung stehen. Jeder Eintrag in der Liste enth?lt Informationen wie den Namen, den mnemonischen Namen (Bereitstellung von Sprachaufforderungen für Entwickler wie "Google US English", Lang (die Sprache der Sprache wie IT-IT) und Voiceuri (diese Stimme ist die Adresse der Sprache Synthesedienst). Wichtiger Hinweis: In Chrome und Safari hei?t das Voiceuri -Attribut als Stimme. Daher verwendet die Demo, die wir in diesem Artikel aufbauen werden, Voice anstelle von Voiceuri. Browserkompatibilit?t Leider sind Chrome 33 (vollst?ndige Unterstützung) und iOS 7 (teilweise unterstützt) zum Zeitpunkt des Schreibens die einzigen Browser, die die Voice -Synthese -API unterstützen. Demo Dieser Abschnitt enth?lt eine einfache Demonstration der Sprachsynthese -API. Mit dieser Seite k?nnen Sie einen Text eingeben und ihn synthetisieren. Darüber hinaus k?nnen Sie die Rate, den Ton und die Sprache festlegen, die Sie verwenden m?chten. Mit den entsprechenden Schaltfl?chen k?nnen Sie auch die Synthese des Textes anhalten, innehalten oder fortsetzen. Bevor wir den H?rer an die Taste anh?ngen, haben wir die Implementierung getestet, da die Unterstützung für diese API sehr begrenzt ist. Im Allgemeinen ist der Test sehr einfach, einschlie?lich des folgenden Code: if (window.SpeechSynthesisUtterance === undefined) { // 不支持} else { // 讀取我的文本} Wenn der Test fehlschl?gt, wird die Meldung "API nicht unterstützt" angezeigt.Sobald die Unterstützung verifiziert ist, laden wir die verfügbaren Stimmen im spezifischen Auswahlbox dynamisch im Tag platziert. Beachten Sie, dass es ein Problem mit der Methode GetVoices () in Chrome (#340160) gibt. Deshalb habe ich mit setInterval () eine Problemumgehung dafür erstellt. Anschlie?end fügen wir jedem Knopf einen Handler hinzu, damit sie ihre spezifischen Aktionen aufrufen k?nnen (spielen, anhalten usw.). Hier finden Sie eine Live -Demonstration des Code. Zus?tzlich finden sich diese Demo und alle anderen Demos, die ich bisher gebaut habe, in meinem HTML5 -API -Demo -Repository. `` `

charset = "utf-8" & gt; name = "viewPort" content = "width = Ger?tebidth, initial-scale = 1,0"/& gt;

Sprachsynthese API Demo & gt;

• { -Webkit-Box-Gr??e: Border-Box; -moz-Box-Gr??e: Border-Box; Kastengr??en: 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>

& gt;

Sprachsynthese -API & gt;

<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>

Schlussfolgerung

Dieser Artikel führt die Sprachsynthese -API vor. Dies ist eine API, die Text synthetisiert und die Gesamterfahrung unserer Website -Benutzer, insbesondere von Sehbehinderten, verbessert. Wie wir sehen k?nnen, enth?lt diese API mehrere Objekte, Methoden und Eigenschaften, aber es ist nicht schwer zu verwenden. Leider ist seine Browserunterstützung derzeit sehr schlecht, wobei Chrome und Safari die einzigen Browser sind, die sie unterstützen. Hoffentlich folgen mehr Browser nach Beispiel und erm?glichen es Ihnen, dies tats?chlich auf Ihrer Website zu verwenden. Ich habe beschlossen, das zu tun. Vergessen Sie nicht, die Demo zu spielen. Wenn Sie diesen Beitrag m?gen, hinterlassen Sie bitte einen Kommentar. Ich m?chte wirklich Ihre Meinungen h?ren. H?ufig gestellte Fragen zu Webseiten und Sprachsynthese -APIs (FAQ)

Wie lautet die Sprachsynthese -API und wie funktioniert sie?

Die Voice-Synthese-API ist eine webbasierte Schnittstelle, mit der Entwickler Text-zu-Sprache-Funktionalit?t in ihre Anwendungen integrieren k?nnen. Es funktioniert, indem geschriebener Text mit computergenerierter Stimme in gesprochene W?rter konvertiert wird. Dies geschieht, indem der Text in Sprachkomponenten zerlegt und diese Komponenten in Sprache synthetisiert werden. Die API bietet eine Reihe von Sprachen und Sprachen zur Auswahl, mit der Entwickler die Sprachausgabe an ihre Anforderungen anpassen k?nnen.

Wie implementiere ich die Sprachsynthese -API in einer Webanwendung?

Die Implementierung der Sprachsynthese -API in Ihrer Webanwendung umfasst mehrere Schritte. Zun?chst müssen Sie eine neue Sprach -Synthesitutter -Instanz erstellen und seine Texteigenschaft auf den Text festlegen, den Sie vorlesen m?chten. Sie k?nnen dann andere Eigenschaften wie Sprache, Ton und Rate festlegen, um die Sprachausgabe anzupassen. Nennen Sie schlie?lich die Spoke -Methode der Sprachsynthese -Schnittstelle, um die Sprachsynthese zu starten.

Kann ich die Stimme und Sprache der Sprachausgabe anpassen?

Ja, die Sprachsynthese -API bietet eine Reihe von Sprach- und Sprachen, aus denen Sie ausw?hlen k?nnen. Sie k?nnen die Stimme und Sprache festlegen, indem Sie die Sprach- und Langeigenschaften der Sprach -Synthesiteranzinstanz festlegen. Mit der API k?nnen Sie auch den Ton und die Rate Ihrer Stimme einstellen, um die Ausgabe weiter anzupassen.

Was sind die Grenzen der Sprachsynthese -API?

W?hrend die Sprachsynthese -API ein leistungsstarkes Werkzeug ist, hat sie einige Einschr?nkungen. Beispielsweise kann die Verfügbarkeit von Sprach- und Sprachverfügbarkeit je nach Browser und Betriebssystem variieren. Darüber hinaus kann die Qualit?t der Sprachausgabe variieren und klingt m?glicherweise nicht immer natürlich. Darüber hinaus bietet diese API keine Kontrolle über die Aussprache eines bestimmten Wortes oder einer bestimmten Phrase.

Wie kann ich bei der Verwendung von Sprachsynthese -API Fehler umgehen?

Die Voice -Synthese -API bietet ein Fehlerereignis, das Sie anh?ren k?nnen. Dieses Ereignis wird ausgel?st, wenn w?hrend der Sprachsynthese ein Fehler auftritt. Sie k?nnen dieses Ereignis bew?ltigen, indem Sie der RedeSySynthesiterance -Instanz einen Ereignish?rer hinzufügen und eine Rückruffunktion bereitstellen, die aufgerufen wird, wenn das Ereignis ausgel?st wird.

Kann ich die Sprachausgabe innehalten und fortsetzen?

Ja, die Voice -Synthese -API bietet Pause und Wiederherstellungsmethoden, mit denen Sie Ihre Sprachausgabe steuern k?nnen. Sie k?nnen diese Methoden auf der Redesynthesis -Schnittstelle aufrufen, um die Stimme zu pausieren und wiederherzustellen.

Ist die Voice -Synthese -API in allen Browsern unterstützt?

Die Voice -Synthese -API wird in den meisten modernen Browsern unterstützt, darunter Chrome, Firefox, Safari und Edge. Die Verfügbarkeit von Sprach- und Sprachverfügbarkeit kann jedoch je nach Browser und Betriebssystem variieren.

Kann ich die Voice -Synthese -API in meiner mobilen Anwendung verwenden?

Ja, die Voice -Synthese -API kann in mobilen Anwendungen verwendet werden. Die Verfügbarkeit von Sprach- und Sprachverfügbarkeit kann jedoch je nach dem mobilen Betriebssystem variieren.

Wie testet man die Sprachsynthese -API?

Sie k?nnen die API der Sprachsynthese testen, indem Sie eine einfache Webseite erstellen, die den geschriebenen Text mithilfe der API in Sprache umwandelt. Sie k?nnen dann verschiedene Stimmen, Sprachen, T?ne und Raten ausprobieren, um zu sehen, wie sie sich auf die Sprachausgabe auswirken.

Wo finde ich weitere Informationen über die Voice -Synthese -API?

finden Sie weitere Informationen zur Voice -Synthese -API in der offiziellen Dokumentation der World Wide Web Alliance (W3C). Es gibt auch viele Online -Tutorials und Artikel, die detaillierte Erkl?rungen und Beispiele zur Verwendung der API liefern.

Das obige ist der detaillierte Inhalt vonSprechende Webseiten und die Sprachsynthese -API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!