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 - >
  <div class="neighbor-articles"><h4 class="ui header">Siehe auch</h4><a href="/item/how-to-become-a-fierce-creative-edd930/" title="Wie man ein wilder Kreativer wird">Wie man ein wilder Kreativer wird</a><a href="/item/save-yourself-some-time-here-s-how-to-do-christmas-shopping-right-6dee66/" title="Sparen Sie sich etwas Zeit. So erledigen Sie Weihnachtseinkäufe richtig">Sparen Sie sich etwas Zeit. So erledigen Sie Weihnachtseinkäufe richtig</a><a href="/item/crossing-the-product-chasm-or-how-to-prioritise-your-product-work-to-widen-your-audience-291859/" title="Überqueren Sie die „Produktlücke“ oder bestimmen Sie, wie Sie Ihre Produktarbeit priorisieren, um Ihr Publikum zu erweitern">Überqueren Sie die „Produktlücke“ oder bestimmen Sie, wie Sie Ihre Produktarbeit priorisieren, um Ihr Publikum zu erweitern</a><a href="/item/guilt-and-the-negative-thoughts-associated-with-diabetes-and-how-to-overcome-them-09a81f/" title="Schuld und die negativen Gedanken im Zusammenhang mit Diabetes und wie man sie überwinden kann">Schuld und die negativen Gedanken im Zusammenhang mit Diabetes und wie man sie überwinden kann</a><a href="/item/how-to-start-writing-again-in-4-easy-steps-6dacdd/" title="Wie fange ich wieder an zu schreiben? In 4 einfachen Schritten">Wie fange ich wieder an zu schreiben? In 4 einfachen Schritten</a></div></main><div class="push"></div></div><footer style="height:50px">chinthaka.org<!-- --> © <!-- -->2020<!-- --> <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></body></html>