So erstellen Sie eine einfache Spracherkennungs-App

Foto von freestocks.org aus Pexels
„Ich glaube, dass wir in diesem 10-jährigen Zeitraum nicht nur die Tastatur und die Maus für die Interaktion verwenden werden, sondern dass wir in dieser Zeit die Spracherkennung und die Sprachausgabe so gut perfektioniert haben werden, dass diese zu einem Standardbestandteil von werden Schnittstelle. ”- Bill Gates, 1. Oktober 1997

Die Technologie hat einen langen Weg zurückgelegt, und mit jedem neuen Fortschritt wird die Menschheit mehr an sie gebunden und sehnt sich nach diesen neuen coolen Funktionen für alle Geräte.

Mit dem Aufkommen von Siri, Alexa und Google Assistant sehnen sich Benutzer von Technologien nach Spracherkennung bei ihrer täglichen Nutzung des Internets. In diesem Beitrag befasse ich mich mit der Integration der systemeigenen Spracherkennung und Sprachsynthese in den Browser mithilfe der JavaScript WebSpeech-API.

In den Mozilla-Webdokumenten heißt es:

Mit der Web Speech API können Sie Sprachdaten in Webanwendungen einbinden. Die Web-Sprach-API besteht aus zwei Teilen: SpeechSynthesis (Text-to-Speech) und SpeechRecognition (Asynchrone Spracherkennung).

Anforderungen, die wir benötigen, um unsere Anwendung zu erstellen

Für diese einfache Spracherkennungs-App arbeiten wir mit nur drei Dateien, die sich alle im selben Verzeichnis befinden:

  • index.html enthält den HTML-Code für die App.
  • style.css enthält die CSS-Stile.
  • index.js mit dem JavaScript-Code.

Außerdem müssen wir ein paar Dinge an Ort und Stelle haben. Sie sind wie folgt:

  • Grundkenntnisse in JavaScript.
  • Ein Webserver zum Ausführen der App. Der Webserver für Chrome wird für diesen Zweck ausreichen.

Einrichten unserer Spracherkennungs-App

Beginnen wir mit der Einrichtung von HTML und CSS für die App. Unten ist das HTML-Markup:




  
  
  
   Spracherkennung </ title>
  <link rel = "stylesheet" href = "style.css">
  <link href = "https://fonts.googleapis.com/css?family=Shadows+Into+Light" rel = "stylesheet">
  <! - Laden Sie die Schrift hier für das auf der Seite verwendete Symbol ->
</ head>
<body>
  <div class = "container"> <! - Seitencontainer ->
    <div class = "text-box" contenteditable = "true"> </ div> <! - Textfeld, das gesprochenen Text enthält ->
    <i class = "fa fa-microphone"> </ i> <! - Mikrofonsymbol, das vor dem Sprechen angeklickt werden muss ->
  </ div>
  <audio class = "sound" src = "chime.mp3"> </ audio> <! - Sound wird abgespielt, wenn wir auf das Symbol klicken => http://soundbible.com/1598-Electronic-Chime.html - >
  <script src = "index.js"> </ script> <! - Link zu index.js script ->
</ body>
</ html></pre><p>Hier ist der zugehörige CSS-Stil:</p><pre>Körper {
  Hintergrund: # 1e2440;
  Farbe: # f2efe2;
  Schriftgröße: 16px;
  Schriftfamilie: 'Kaushan Script', kursiv;
  Schriftfamilie: 'Shadows Into Light', kursiv;
}</pre><pre>.container {
  Position: relativ;
  Rand: 1px durchgehend # f2efe2;
  Breite: 40 vw;
  maximale Breite: 60vw;
  Margin: 0 Auto;
  Randradius: 0,1rem;
  Hintergrund: # f2efe2;
  Polsterung: 0,2rem 1rem;
  Farbe: # 1e2440;
  Überlauf: scrollen;
  Rand oben: 10 vh;
}</pre><pre>.Textfeld {
  maximale Höhe: 70vh;
  Überlauf: scrollen;
}</pre><pre>.text-box: focus {
  Gliederung: keine;
}</pre><pre>.text-box p {
  Rand unten: 1px schwarz gepunktet;
  margin: 0px! wichtig;
}</pre><pre>.fa {
  Farbe weiß;
  Hintergrund: # 1e2440;
  Randradius: 50%;
  Cursor: Zeiger;
  Rand oben: 1rem;
  schweben rechts;
  Breite: 2rem;
  Höhe: 2rem;
  display: flex! wichtig;
  Align-Items: Center;
  Rechtfertigungsinhalt: Mitte;
}</pre><pre>@media (max-width: 768px) {
  .container {
    Breite: 85vw;
    maximale Breite: 85vw;
  }</pre><pre>.Textfeld {
    maximale Höhe: 55vh;
  }
}</pre><p>Das Kopieren des obigen Codes sollte ungefähr so ​​aussehen:</p><img alt="Webinterface für die einfache Spracherkennungs-App" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/chinthaka/1568350367886.png" /><h3>Starten Sie unsere Spracherkennungs-App mit der WebSpeech-API</h3><p>Zum jetzigen Zeitpunkt ist die WebSpeech-API nur in Firefox und Chrome verfügbar. Die Sprachsyntheseschnittstelle befindet sich auf dem Fensterobjekt des Browsers als speechSynthesis, während sich die Spracherkennungsschnittstelle auf dem Fensterobjekt des Browsers als SpeechRecognition in Firefox und als webkitSpeechRecognition in Chrome befindet.</p><p>Wir werden die Erkennungsschnittstelle auf SpeechRecognition einstellen, unabhängig davon, in welchem ​​Browser wir arbeiten:</p><pre>window.SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition;</pre><p>Als Nächstes instanziieren wir die Spracherkennungsschnittstelle:</p><pre>const recognition = new SpeechRecognition ();</pre><pre>const icon = document.querySelector ('i.fa.fa-microphone')
let paragraph = document.createElement ('p');
let container = document.querySelector ('. text-box');</pre><pre>container.appendChild (Absatz);</pre><pre>const sound = document.querySelector ('. sound');</pre><p>Im obigen Code haben wir nicht nur die Spracherkennung instanziiert, sondern auch das Symbol, das Textfeld und die Soundelemente auf der Seite ausgewählt. Wir haben auch ein Absatzelement erstellt, das die Wörter enthält, die wir sagen, und wir haben es an das Textfeld angehängt.</p><p>Immer wenn auf das Mikrofonsymbol auf der Seite geklickt wird, möchten wir unseren Sound abspielen und den Spracherkennungsdienst starten. Um dies zu erreichen, fügen wir dem Symbol einen Klickereignis-Listener hinzu:</p><pre>icon.addEventListener ('click', () => {
  sound.play ();
  diktieren();
});</pre><pre>const dictate = () => {
  recognition.start ();
}</pre><p>Im Event-Listener haben wir nach dem Abspielen des Sounds eine Diktatfunktion erstellt und aufgerufen. Die Diktatfunktion startet den Spracherkennungsdienst durch Aufrufen der Startmethode für die Spracherkennungsinstanz.</p><p>Um ein Ergebnis für das zurückzugeben, was ein Benutzer sagt, müssen wir unserer Spracherkennungsinstanz ein Ergebnisereignis hinzufügen. Die Diktatfunktion sieht dann so aus:</p><pre>const dictate = () => {
  recognition.start ();
  recognition.onresult = (event) => {
    const speechToText = event.results [0] [0] .transcript;
    
    paragraph.textContent = speechToText;
  }
}</pre><p>Das resultierende Ereignis gibt ein SpeechRecognitionEvent zurück, das ein Ergebnisobjekt enthält. Diese wiederum enthält die Transkripteigenschaft, die die erkannte Sprache im Text enthält. Wir speichern den erkannten Text in einer Variablen namens speechToText und fügen ihn in das Absatzelement auf der Seite ein.</p><p>Wenn wir die App an diesem Punkt ausführen, klicken Sie auf das Symbol und sagen Sie etwas, es sollte auf der Seite erscheinen.</p><img alt="Sprachausgabe in voller Wirkung" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/chinthaka/1568350369169.png" /><h3>Mit Text in Sprache umhüllen</h3><p>Um unserer App Text zu Sprache hinzuzufügen, verwenden wir die speechSynthesis-Schnittstelle der WebSpeech-API. Wir beginnen damit, es zu instanziieren:</p><pre>const synth = window.speechSynthesis;</pre><p>Als nächstes erstellen wir eine Funktion speak, die wir aufrufen, wenn die App etwas sagen soll:</p><pre>const speak = (action) => {
  utterThis = new SpeechSynthesisUtterance (action ());
  synth.speak (utterThis);
};</pre><p>Die Speak-Funktion übernimmt eine Funktion, die als Aktion bezeichnet wird, als Parameter. Die Funktion gibt eine Zeichenfolge zurück, die anSpeechSynthesisUtterance übergeben wird. SpeechSynthesisUtterance ist die WebSpeech-API-Schnittstelle, die den Inhalt enthält, den der Spracherkennungsdienst lesen soll. Die speechSynthesis-Sprechmethode wird dann in ihrer Instanz aufgerufen und der Inhalt zum Lesen übergeben.</p><p>Um dies zu testen, müssen wir wissen, wann der Benutzer mit dem Sprechen fertig ist und ein Schlüsselwort sagt. Zum Glück gibt es eine Methode, um das zu überprüfen:</p><pre>const dictate = () => {
  ...
  if (event.results [0] .isFinal) {</pre><pre>    if (speechToText.includes ('wie spät ist es')) {
        speak (getTime);
    };
    
    if (speechToText.includes ('Was ist das heutige Datum?</pre><pre>')) {
        speak (getDate);
    };
    
    if (speechToText.includes ('wie ist das Wetter in')) {
        getTheWeather (speechToText);
    };</pre><pre>  }
  ...
}</pre><pre>const getTime = () => {
  konst. Zeit = neues Datum (Date.now ());
  return `Die Zeit ist $ {time.toLocaleString ('en-US', {hour: 'numeric', minute: 'numeric', hour12: true})}`
};</pre><pre>const getDate = () => {
  konstante Zeit = neues Datum (Date.now ())
  return `Heute ist $ {time.toLocaleDateString ()}`;
};</pre><pre>const getTheWeather = (speech) => {
fetch (http://api.openweathermap.org/data/2.5/weather?q=$ {speech.split ('') [5]} & appid = 58b6f7c78582bffab3936dac99c31b25 & units = metric`)
.then (Funktion (Antwort) {
  return response.json ();
})
.then (Funktion (Wetter) {
  if (weather.cod === '404') {
    utterThis = new SpeechSynthesisUtterance (`Ich kann das Wetter für $ {speech.split ('') [5]}` nicht finden);
    synth.speak (utterThis);
    Rückkehr;
  }
  utterThis = new SpeechSynthesisUtterance (`die Wetterbedingung in $ {weather.name} ist bei einer Temperatur von $ {weather.main.temp} Grad Celsius meistens voll von $ {weather.weather [0] .description});
  synth.speak (utterThis);
  });
};</pre><p>Im obigen Code haben wir die isFinal-Methode für unser Ereignisergebnis aufgerufen, die je nachdem, ob der Benutzer mit dem Sprechen fertig ist, true oder false zurückgibt.</p><p>Wenn der Benutzer mit dem Sprechen fertig ist, prüfen wir, ob das Protokoll des Gesagten Stichwörter enthält, z. B. wie spät es ist. In diesem Fall rufen wir unsere speak-Funktion auf und übergeben sie einer der drei Funktionen getTime, getDate oder getTheWeather, die alle einen String zurückgeben, den der Browser lesen kann.</p><p>Unsere index.js-Datei sollte nun so aussehen:</p><p>Klicken Sie auf das Symbol und versuchen Sie einen der folgenden Sätze:</p><ul><li>Wie spät ist es?</li><li>Welches Datum ist heute?</li><li>Wie ist das Wetter in Lagos?</li></ul><p>Wir sollten eine Antwort von der App erhalten.</p><h3>Fazit</h3><p>In diesem Artikel konnten wir eine einfache Spracherkennungs-App erstellen. Es gibt noch ein paar coole Dinge, die wir tun könnten, z. B. eine andere Stimme zum Lesen für die Benutzer auswählen, aber das überlasse ich Ihnen.</p><p>Wenn Sie Fragen oder Feedback haben, hinterlassen Sie diese bitte unten als Kommentar. Ich kann es kaum erwarten zu sehen, was Sie damit bauen. Sie können mich auf Twitter @developia_ treffen.</p></div><div class="neighbor-articles"><h4 class="ui header">Siehe auch</h4><a href="/item/how-to-hack-your-way-into-financial-independence-with-cryptocurrencies-part-2-531fe8/" title="Wie Sie Ihren Weg in die finanzielle Unabhängigkeit mit Cryptocurrencies finden, Teil 2">Wie Sie Ihren Weg in die finanzielle Unabhängigkeit mit Cryptocurrencies finden, Teil 2</a><a href="/item/how-to-structure-a-funny-story-652c21/" title="Wie man eine lustige Geschichte strukturiert">Wie man eine lustige Geschichte strukturiert</a><a href="/item/why-your-instagram-account-isn-t-growing-and-how-to-fix-it-017321/" title="Warum Ihr Instagram-Konto nicht wächst und wie Sie es beheben können">Warum Ihr Instagram-Konto nicht wächst und wie Sie es beheben können</a><a href="/item/eidoo-ico-engine-how-to-join-icos-or-promote-your-own-token-sale-ba191d/" title="Eidoo ICO Engine: So treten Sie ICOs bei oder fördern Sie Ihren eigenen Token-Verkauf">Eidoo ICO Engine: So treten Sie ICOs bei oder fördern Sie Ihren eigenen Token-Verkauf</a><a href="/item/how-to-win-back-subscribers-who-cancel-4de97b/" title="So gewinnen Sie Abonnenten zurück, die stornieren">So gewinnen Sie Abonnenten zurück, die stornieren</a></div></main><div class="push"></div></div><footer style="height:50px">chinthaka.org<!-- --> © <!-- -->2019<!-- --> <a href="https://ar.chinthaka.org/item/how-to-build-a-simple-speech-recognition-app-6dc6fa" title="https://chinthaka.org">chinthaka.org</a></footer></div></div></div><script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js"></script><script>
                  window.cookieconsent.initialise({
                    "palette": {
                      "popup": {
                        "background": "#eaf7f7",
                        "text": "#5c7291"
                      },
                      "button": {
                        "background": "#56cbdb",
                        "text": "#ffffff"
                      }
                    },
                    "showLink": false
                  });
              </script><script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><script>
                (adsbygoogle = window.adsbygoogle || []).push({
                  google_ad_client: "ca-pub-3845662922897763",
                  enable_page_level_ads: true
                });
              </script></body></html>