首页 > web前端 > js教程 > 正文

创建发音评估应用程序(第 1 部分)

PHPz
发布: 2024-08-18 07:01:02
原创
1013 人浏览过

本教程的目的是创建一个应用程序来控制用户的发音。

要遵循它,您必须了解 javascript,更理想的是 Vue.js 3。

这个想法

我最近决定回到德语。我在使用这种语言时遇到的主要困难是正确发音。通常我会听一个例子,然后把自己重复的录音录下来,然后再听一遍。这是一个复杂的过程,我必须承认我的耳朵不太好。

基于这一观察,我想知道是否有一个应用程序或 API 可以告诉我我的德语单词或句子的发音是否正确!经过一些调查和重大发现后,我想编写自己的应用程序来解决我的问题。

这就是我的做法!

可用的API

经过一番研究,我找到了可以解决我的问题的应用程序。但总的来说,发音验证通常只是付费应用程序(或与订阅一起使用的应用程序)的一项附加功能。然后我决定寻找 API。

这里是完成这项工作的 API 列表:

  • Google Cloud 语音转文本 API
  • 微软 Azure 语音服务
  • iSpeech 发音
  • 言语学
  • 演讲
  • 现在的艾莎
  • 言语超级

这些 API 是付费的,但通常允许您获得 2 周的测试和实验访问权限。

因为我想检查我的德语发音,所以我选择使用 SpeechSuper API 进行测试,因为它支持包括德语在内的多种语言。在本教程的后面部分,我们将尝试 Speechace API 来演示根据您的需求从一个 API 切换到另一个 API 是多么容易。

应用程序人体工程学的定义

目标是实现一个简单的应用程序,允许您输入单词、录制声音、将录音发送到 API 并显示您的分数。

应用程序如下所示:

Create a pronunciation assessment App (Part 1)

因此,我们将创建一个应用程序,该应用程序将显示一个文本字段,允许输入单词或句子。一个按钮即可让您收听。
然后我们有一个按钮来录制我们的声音,这个按钮在录音模式下会改变风格。只需点击它即可停止并发送到API以获取发音分数。
获得分数后,它会显示为一个图块,其颜色代表我们的分数,从红色到绿色到橙色。

应用程序的初始化

理想的情况是能够将应用程序部署为 Web 应用程序,也可以部署为原生 Android 应用程序。因此我们将使用 Quasar。

类星体框架

Quasar 是一个开源 Vue.js 框架,用于使用单一代码库开发应用程序。它们可以部署在网络上(SPA、PWA、SSR)、作为移动应用程序(Android、iOS)或桌面应用程序(MacOs、Windows、Linux)。

准备

如果还不是这种情况,您需要安装 NodeJS。更好的是使用 volta,因为它允许您根据您的项目使用不同版本的 NodeJs。

我们将首先使用 Quasar 脚手架工具初始化我们的项目。

npm i -g @quasar/cli
npm init quasar
登录后复制

cli 会问我们几个问题,选择以下选项:

选项列表
  • 使用 Quasar CLI 的应用程序
  • 项目文件夹:learn2speak
  • 类星体 v2
  • Javascript
  • Quasar 应用程序与 Vite
  • 软件包名称:learn2speak
  • 项目产品名称:学说话
  • 项目描述:评估你的发音
  • 作者:你自己
  • CSS 预处理器:具有 SCSS 语法的 Sass
  • 所需功能:
    • ESLint
    • Axios
  • ESLint 预设:标准
  • 安装项目依赖项:是的,使用 npm

命令执行后,您可以进入目录并在本地提供应用程序:

cd learn2speak
npm run dev
登录后复制

您的默认浏览器应打开以下地址的页面:http://localhost:9000

Create a pronunciation assessment App (Part 1)

修改建议的骨架以获得目标人体工程学

示例应用程序可用,我们将删除不需要的元素。为此,我们将在 VSCode 中打开源代码(您当然可以使用其他编辑器)

code .
登录后复制

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