Sprechende Webseiten und die Sprachsynthese -API

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.// 创建语音对象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. // 创建语音对象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 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>

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!