Heim > Web-Frontend > js-Tutorial > Hauptteil

Erstellen Sie eine App zur Aussprachebewertung (Teil 1)

PHPz
Freigeben: 2024-08-18 07:01:02
Original
990 Leute haben es durchsucht

Der Zweck dieses Tutorials besteht darin, eine Anwendung zur Steuerung der Aussprache des Benutzers zu erstellen.

Um ihm zu folgen, müssen Sie Kenntnisse in Javascript und idealerweise in Vue.js 3 haben.

Die Idee

Ich habe mich vor Kurzem entschieden, wieder Deutsch zu lernen. Die größte Schwierigkeit, auf die ich in dieser Sprache stoße, besteht darin, sie richtig auszusprechen. Normalerweise höre ich mir ein Beispiel an, nehme auf, wie ich es wiederhole, und höre mir dann noch einmal zu. Es ist ein komplizierter Prozess und ich muss zugeben, dass ich kein sehr gutes Ohr habe.

Aufgrund dieser Beobachtung habe ich mich gefragt, ob es eine App oder eine API gibt, die mir sagen könnte, ob ich ein Wort oder einen Satz auf Deutsch richtig ausspreche! Nach einigen Untersuchungen und großartigen Entdeckungen wollte ich meine eigene App programmieren, um mein Problem zu lösen.

So habe ich es gemacht!

Verfügbare APIs

Nach einiger Recherche konnte ich Apps finden, die mein Problem lösten. Aber insgesamt war die Aussprachevalidierung oft nur eine zusätzliche Funktion einer kostenpflichtigen Anwendung (oder einer, die mit einem Abonnement funktionierte). Ich habe mich dann entschieden, nach APIs zu suchen.

Hier ist die Liste der APIs, die diese Aufgabe übernehmen:

  • Google Cloud Speech-to-Text API
  • Microsoft Azure Speech Service
  • iSpeech-Aussprache
  • Sprachmatik
  • Speechace
  • Elsa Now
  • SpeechSuper

Diese APIs sind kostenpflichtig, ermöglichen Ihnen jedoch im Allgemeinen zwei Wochen lang Zugriff zum Testen und Experimentieren.

Da ich meine Aussprache des Deutschen überprüfen wollte, habe ich mich für den Test mit der SpeechSuper-API entschieden, da diese mehrere Sprachen unterstützt, darunter auch Deutsch. Später im Tutorial werden wir die Speechace-API ausprobieren, um zu zeigen, wie einfach es ist, je nach Bedarf von einer API zur anderen zu wechseln.

Definition der Ergonomie der Anwendung

Das Ziel besteht darin, eine einfache App zu implementieren, mit der Sie ein Wort eingeben, Ihre Stimme aufzeichnen, die Audioaufnahme an die API senden und Ihre Punktzahl anzeigen können.

So wird die Bewerbung aussehen:

Create a pronunciation assessment App (Part 1)

Also erstellen wir eine Anwendung, die ein Textfeld anzeigt, in das ein Wort oder ein Satz eingegeben werden kann. Über eine Schaltfläche können Sie es anhören.
Wir haben dann eine Taste zum Aufzeichnen unserer Stimme. Diese ändert den Stil, wenn sie sich im Aufnahmemodus befindet. Klicken Sie einfach darauf, um zu stoppen und an die API zu senden, um eine Aussprachebewertung zu erhalten.
Sobald die Punktzahl erreicht ist, wird sie als Kachel mit einer Farbe angezeigt, die unsere Punktzahl darstellt, von Rot über Grün bis Orange.

Initialisierung der Anwendung

Ideal wäre es, die App als Webapp, aber auch als native Android-Anwendung bereitstellen zu können. Aus diesem Grund werden wir Quasar verwenden.

Das Quasar-Framework

Quasar ist ein Open-Source-Vue.js-Framework zur Entwicklung von Anwendungen mit einer einzigen Codebasis. Sie können im Web (SPA, PWA, SSR), als mobile Anwendung (Android, iOS) oder als Desktop-Anwendung (MacOs, Windows, Linux) bereitgestellt werden.

Vorbereitung

Falls dies noch nicht der Fall ist, müssen Sie NodeJS installieren. Besser ist es, Volta zu verwenden, da Sie damit je nach Ihren Projekten unterschiedliche Versionen von NodeJs verwenden können.

Wir beginnen mit der Initialisierung unseres Projekts mit dem Quasar-Gerüstwerkzeug.

npm i -g @quasar/cli
npm init quasar
Nach dem Login kopieren

Die CLI wird uns mehrere Fragen stellen. Wählen Sie die folgenden Optionen:

Optionsliste
  • App mit Quasar CLI
  • Projektordner: learn2speak
  • Quasar v2
  • Javascript
  • Quasar-App mit Vite
  • Paketname: learn2speak
  • Projektproduktname: Sprechen lernen
  • Projektbeschreibung: Bewerten Sie Ihre Aussprache
  • Autor: Sie selbst
  • CSS-Präprozessor: Sass mit SCSS-Syntax
  • Benötigte Funktionen:
    • ESLint
    • Axios
  • ESLint-Voreinstellung: Standard
  • Projektabhängigkeiten installieren: Ja, npm verwenden

Sobald der Befehl ausgeführt wurde, können Sie das Verzeichnis aufrufen und die Anwendung lokal bereitstellen:

cd learn2speak
npm run dev
Nach dem Login kopieren

Ihr Standardbrowser sollte die Seite unter der folgenden Adresse öffnen: http://localhost:9000

Create a pronunciation assessment App (Part 1)

Modifikation des vorgeschlagenen Skeletts, um die angestrebte Ergonomie zu erreichen

Die Beispielanwendung ist verfügbar. Wir werden die Elemente entfernen, die wir nicht benötigen. Dazu öffnen wir den Quellcode in VSCode (Sie können natürlich auch einen anderen Editor verwenden)

code .
Nach dem Login kopieren

Layout modification

Quasar provides us with the notion of Layout and then of page included in the latter. The pages and the layout are chosen via the router. For this tutorial, we do not need to know these notions, but you can learn them here: Quasar layout

We do not need drawer, at least not for now so we will delete it from the src/layouts/MainLayout.vue file. To do this, delete the section of the