Maison > interface Web > js tutoriel > le corps du texte

Créer une application d'évaluation de la prononciation (Partie 1)

PHPz
Libérer: 2024-08-18 07:01:02
original
852 Les gens l'ont consulté

Le but de ce tutoriel est de créer une application pour contrôler la prononciation de l'utilisateur.

Pour le suivre, vous devez avoir des connaissances en javascript et plus idéalement Vue.js 3.

L'idée

J'ai récemment décidé de me remettre à l'allemand. La principale difficulté que je rencontre dans cette langue est de la prononcer correctement. Habituellement, j'écoute un exemple, je m'enregistre en le répétant et je m'écoute à nouveau. C'est un processus compliqué et je dois admettre que je n'ai pas une très bonne oreille.

Partant de ce constat, je me suis demandé s'il existait une App ou une API qui pourrait me dire si je prononçais correctement un mot ou une phrase en allemand ! Après quelques investigations et belles découvertes, j'ai eu envie de coder ma propre application pour résoudre mon problème.

Voici comment j'ai procédé !

API disponibles

Après quelques recherches, j'ai pu trouver des applications qui ont résolu mon problème. Mais dans l’ensemble, la validation de la prononciation n’était souvent qu’une fonction supplémentaire d’une application payante (ou fonctionnant avec un abonnement). J'ai alors décidé de chercher des API.

Voici la liste des API qui font le job :

  • API de synthèse vocale Google Cloud
  • Service vocal Microsoft Azure
  • iSpeech Prononciation
  • Speechmatics
  • Discours
  • Elsa maintenant
  • DiscoursSuper

Ces API sont payantes mais permettent généralement d'avoir 2 semaines d'accès pour tester et expérimenter.

Comme je voulais vérifier ma prononciation de l'allemand, j'ai choisi de tester avec l'API SpeechSuper car elle prend en charge plusieurs langues dont l'allemand. Plus loin dans le didacticiel, nous essaierons l'API Speechace pour démontrer à quel point il est facile de passer d'une API à une autre en fonction de vos besoins.

Définition de l'ergonomie de l'application

L'objectif est de mettre en place une application simple qui permet de saisir un mot, d'enregistrer votre voix, d'envoyer l'enregistrement audio à l'API et d'afficher votre score.

Voici à quoi ressemblera l'application :

Create a pronunciation assessment App (Part 1)

Nous allons donc créer une application qui présentera un champ de texte permettant la saisie d'un mot ou d'une phrase. Un bouton vous permettra de l'écouter.
On a alors un bouton pour enregistrer notre voix, celui-ci changera de style lorsqu'il sera en mode enregistrement. Il suffit de cliquer dessus pour arrêter et envoyer à l'API pour obtenir un score de prononciation.
Une fois le score obtenu, il s'affiche sous forme de tuile avec une couleur représentant notre score, du rouge au vert en passant par l'orange.

Initialisation de l'application

L'idéal serait de pouvoir déployer l'App en tant que webapp, mais aussi en tant qu'application Android native. Pour cette raison, nous utiliserons Quasar.

Le cadre Quasar

Quasar est un framework Vue.js open source permettant de développer des applications avec une seule base de code. Ils peuvent être déployés sur le web (SPA, PWA, SSR), sous forme d'application mobile (Android, iOS) ou sous forme d'application Desktop (MacOs, Windows, Linux).

Préparation

Si ce n'est pas déjà le cas, vous devez installer NodeJS. Le mieux est d'utiliser volta car cela vous permettra d'utiliser différentes versions de NodeJs en fonction de vos projets.

Nous commencerons par initialiser notre projet avec l'outil d'échafaudage Quasar.

npm i -g @quasar/cli
npm init quasar
Copier après la connexion

La cli nous posera plusieurs questions, choisissez les options suivantes :

Liste des options
  • Application avec Quasar CLI
  • Dossier du projet : learn2speak
  • Quasar v2
  • Javascript
  • Application Quasar avec Vite
  • Nom du package : learn2speak
  • Nom du produit du projet : Apprendre à parler
  • Description du projet : Évaluez votre prononciation
  • Auteur : vous-même
  • Préprocesseur CSS : Sass avec la syntaxe SCSS
  • Fonctionnalités nécessaires :
    • ESLint
    • Axios
  • Préréglage ESLint : Standard
  • Installer les dépendances du projet : Oui, utilisez npm

Une fois la commande exécutée, vous pouvez entrer dans le répertoire et servir l'application localement :

cd learn2speak
npm run dev
Copier après la connexion

Votre navigateur par défaut devrait ouvrir la page à l'adresse suivante http://localhost:9000

Create a pronunciation assessment App (Part 1)

Modification du squelette proposé pour obtenir l'ergonomie ciblée

L'exemple d'application est disponible, nous supprimerons les éléments dont nous n'avons pas besoin. Pour ce faire nous allons ouvrir le code source dans VSCode (vous pouvez bien sûr utiliser un autre éditeur)

code .
Copier après la connexion

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