我们不需要更多的布局部分，因为我们的应用程序将只定义一页。

主页

主页面的实现在文件：src/pages/IndexPage.vue

这是我们将放置文本字段和保存按钮的主页。

对于此文件，我们只需从模板（\\\"创建发音评估应用程序（第 标签）中删除 Quasar 徽标，并修改脚本部分以使用 vueJS 3 组合 api，以便源看起来像以下文件：

我们现在将使用 Quasar 组件 QInput 添加文本字段

为此，我们将 q-input 组件添加到页面模板中：

您可以看到文本字段显示在屏幕中央，这是由于 Quasar flex 和 flex-center 类所致。这些类由 Quasar 定义：Flexbox。我们将通过将文本字段放置在屏幕顶部来解决此问题，我们还将利用它来设置组件的样式。

Quasar 甚至为我们提供了一个 Flex Playground 来进行实验并找到要放置的类。

正如你所看到的，我们在脚本部分定义了一个句子引用来存储用户输入的值。它通过 v-model 指令关联到 q-input 组件

我们将通过添加允许录制单词或句子发音的按钮来完成第一部分。为此，我们将简单地使用 Quasar 的 q 按钮组件并将其放置在文本字段之后。

请注意，我们添加了 q-mt-lg 类，通过在每个组件上方留出一些空间来稍微放松界面。关于间距可以参考Quasar文档。

应用程序将如下所示：

\\\"Create

接下来我们要做什么

因此，我们成功获得了应用程序的框架。

在后面的部分我们将了解如何获取音频，然后如何通过 SpeechSuper API 获取分数

结论

不要犹豫评论帖子！第 2 部分即将推出！

","image":"http://www.luping.net/uploads/20240828/172485325166cf2c030035a.png","datePublished":"2024-08-28T21:54:10+08:00","dateModified":"2024-08-28T21:54:10+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
”工欲善其事，必先利其器。“—孔子《论语.录灵公》
在线工具
软件教程
网址导航
编程
首页 > 编程 > 创建发音评估应用程序（第 1 部分）

创建发音评估应用程序（第 1 部分）

发布于2024-08-28
浏览：723

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

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

这个想法

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

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

我就是这样做的！

可用的API

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

以下是执行此操作的 API 列表：

  • Google Cloud 语音转文本 API
  • Microsoft 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，因为它允许您根据您的项目使用不同版本的 NodeJ。

我们将首先使用 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 .

布局修改

Quasar 为我们提供了布局的概念，以及后者中包含的页面的概念。页面和布局是通过路由器选择的。对于本教程，我们不需要了解这些概念，但您可以在这里学习它们：Quasar 布局

我们不需要抽屉，至少现在不需要，所以我们将从 src/layouts/MainLayout.vue 文件中删除它。为此，删除 ... 标记之间包含的

然后我们可以删除整个脚本部分并用以下代码替换它：

我们不需要更多的布局部分，因为我们的应用程序将只定义一页。

主页

主页面的实现在文件：src/pages/IndexPage.vue

这是我们将放置文本字段和保存按钮的主页。

对于此文件，我们只需从模板（创建发音评估应用程序（第 1 部分） 标签）中删除 Quasar 徽标，并修改脚本部分以使用 vueJS 3 组合 api，以便源看起来像以下文件：

我们现在将使用 Quasar 组件 QInput 添加文本字段

为此，我们将 q-input 组件添加到页面模板中：

您可以看到文本字段显示在屏幕中央，这是由于 Quasar flex 和 flex-center 类所致。这些类由 Quasar 定义：Flexbox。我们将通过将文本字段放置在屏幕顶部来解决此问题，我们还将利用它来设置组件的样式。

Quasar 甚至为我们提供了一个 Flex Playground 来进行实验并找到要放置的类。

正如你所看到的，我们在脚本部分定义了一个句子引用来存储用户输入的值。它通过 v-model 指令关联到 q-input 组件

我们将通过添加允许录制单词或句子发音的按钮来完成第一部分。为此，我们将简单地使用 Quasar 的 q 按钮组件并将其放置在文本字段之后。

请注意，我们添加了 q-mt-lg 类，通过在每个组件上方留出一些空间来稍微放松界面。关于间距可以参考Quasar文档。

应用程序将如下所示：

Create a pronunciation assessment App (Part 1)

接下来我们要做什么

因此，我们成功获得了应用程序的框架。

在后面的部分我们将了解如何获取音频，然后如何通过 SpeechSuper API 获取分数

  • 第 2 部分：获取音频
  • 第三部分：通过SpeechSuper API获取分数
  • 第 4 部分：打包应用程序

结论

不要犹豫评论帖子！第 2 部分即将推出！

版本声明 本文转载于：https://dev.to/jeromemare/create-a-pronunciation-assessment-app-part-1-dob?1如有侵犯，请联系[email protected]删除
最新教程 更多>
  • 对象拟合：IE和Edge中的封面失败，如何修复？
    对象拟合：IE和Edge中的封面失败，如何修复？
    To resolve this issue, we employ a clever CSS solution that solves the problem:position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50％）...
    编程 发布于2025-03-11
  • 如何使用替换指令在GO MOD中解析模块路径差异？
    如何使用替换指令在GO MOD中解析模块路径差异？
    在使用GO MOD时，在GO MOD 中克服模块路径差异时，可能会遇到冲突，其中3个Party Package将另一个PAXPANCE带有导入式套件之间的另一个软件包，并在导入式套件之间导入另一个软件包。如回声消息所证明的那样： go.etcd.io/bbolt [&&&&&&&&&&&&&&&&...
    编程 发布于2025-03-11
  • 在Java中使用for-to-loop和迭代器进行收集遍历之间是否存在性能差异？
    在Java中使用for-to-loop和迭代器进行收集遍历之间是否存在性能差异？
    For Each Loop vs. Iterator: Efficiency in Collection TraversalIntroductionWhen traversing a collection in Java, the choice arises between using a for-...
    编程 发布于2025-03-11
  • 为什么不使用CSS`content'属性显示图像？
    为什么不使用CSS`content'属性显示图像？
    在Firefox extemers属性为某些图像很大，&& && && &&华倍华倍[华氏华倍华氏度]很少见，却是某些浏览属性很少，尤其是特定于Firefox的某些浏览器未能在使用内容属性引用时未能显示图像的情况。这可以在提供的CSS类中看到：。googlepic { 内容：url（&#...
    编程 发布于2025-03-11
  • PHP阵列键值异常：了解07和08的好奇情况
    PHP阵列键值异常：了解07和08的好奇情况
    PHP数组键值问题，使用07&08 在给定数月的数组中，键值07和08呈现令人困惑的行为时，就会出现一个不寻常的问题。运行print_r（$月份）返回意外结果：键“ 07”丢失，而键“ 08”分配给了9月的值。此问题源于PHP对领先零的解释。当一个数字带有0（例如07或08）的前缀时，PHP将...
    编程 发布于2025-03-11
  • \“（1）vs.（;;）：编译器优化是否消除了性能差异？\”
    \“（1）vs.（;;）：编译器优化是否消除了性能差异？\”
    答案： 在大多数现代编译器中，while（1）和（1）和（;;）之间没有性能差异。编译器： perl： 1 输入 - > 2 2 NextState（Main 2 -E：1）V-> 3 9 Leaveloop VK/2-> A 3 toterloop（next-> 8 last-> 9 ...
    编程 发布于2025-03-11
  • 为什么我会收到MySQL错误＃1089：错误的前缀密钥？
    为什么我会收到MySQL错误＃1089：错误的前缀密钥？
    mySQL错误＃1089：错误的前缀键错误descript [＃1089-不正确的前缀键在尝试在表中创建一个prefix键时会出现。前缀键旨在索引字符串列的特定前缀长度长度，可以更快地搜索这些前缀。了解prefix keys `这将在整个Movie_ID列上创建标准主键。主密钥对于唯一识别...
    编程 发布于2025-03-11
  • 如何使用Regex在PHP中有效地提取括号内的文本
    如何使用Regex在PHP中有效地提取括号内的文本
    php：在括号内提取文本在处理括号内的文本时，找到最有效的解决方案是必不可少的。一种方法是利用PHP的字符串操作函数，如下所示： 作为替代 $ text ='忽略除此之外的一切（text）'; preg_match（'＃（（。 &&& [Regex使用模式来搜索特...
    编程 发布于2025-03-11
  • 为什么尽管有效代码，为什么在PHP中捕获输入？
    为什么尽管有效代码，为什么在PHP中捕获输入？
    在php ;?>" method="post">The intention is to capture the input from the text box and display it when the submit button is clicked.但是，输出...
    编程 发布于2025-03-11
  • 如何在JavaScript对象中动态设置键？
    如何在JavaScript对象中动态设置键？
    在尝试为JavaScript对象创建动态键时，如何使用此Syntax jsObj['key' i] = 'example' 1;不工作。正确的方法采用方括号： jsobj ['key''i] ='example'1; 在JavaScript中，数组是一...
    编程 发布于2025-03-11
  • 如何干净地删除匿名JavaScript事件处理程序？
    如何干净地删除匿名JavaScript事件处理程序？
    删除匿名事件侦听器将匿名事件侦听器添加到元素中会提供灵活性和简单性，但是当要删除它们时，可以构成挑战，而无需替换元素本身就可以替换一个问题。 element？ element.addeventlistener（event，function（）{/在这里工作/}，false）; 要解决此问题，请考虑...
    编程 发布于2025-03-11
  • Java是否允许多种返回类型：仔细研究通用方法？
    Java是否允许多种返回类型：仔细研究通用方法？
    在Java中的多个返回类型：一种误解类型：在Java编程中揭示，在Java编程中，Peculiar方法签名可能会出现，可能会出现，使开发人员陷入困境，使开发人员陷入困境。 getResult（string s）; ，其中foo是自定义类。该方法声明似乎拥有两种返回类型：列表和E。但这确实是如此吗...
    编程 发布于2025-03-11
  • 版本5.6.5之前，使用current_timestamp与时间戳列的current_timestamp与时间戳列有什么限制？
    版本5.6.5之前，使用current_timestamp与时间戳列的current_timestamp与时间戳列有什么限制？
    在时间戳列上使用current_timestamp或MySQL版本中的current_timestamp或在5.6.5 此限制源于遗留实现的关注，这些限制需要对当前的_timestamp功能进行特定的实现。 创建表`foo`（ `Productid` int（10）unsigned not n...
    编程 发布于2025-03-11
  • 如何使用不同数量列的联合数据库表？
    如何使用不同数量列的联合数据库表？
    合并列数不同的表 当尝试合并列数不同的数据库表时，可能会遇到挑战。一种直接的方法是在列数较少的表中，为缺失的列追加空值。 例如，考虑两个表，表 A 和表 B，其中表 A 的列数多于表 B。为了合并这些表，同时处理表 B 中缺失的列，请按照以下步骤操作： 确定表 B 中缺失的列，并将它们添加到表的末...
    编程 发布于2025-03-11
  • 如何使用Java.net.urlConnection和Multipart/form-data编码使用其他参数上传文件？
    如何使用Java.net.urlConnection和Multipart/form-data编码使用其他参数上传文件？
    使用http request 上传文件上传到http server，同时也提交其他参数，java.net.net.urlconnection and Multipart/form-data Encoding是普遍的。 Here's a breakdown of the process:Mu...
    编程 发布于2025-03-11
分类更多>
学日语 学韩语 学中文 学外语 游戏 常见问题 科技周边 人工智能 软件教程 编程 文章

学习中文

工具更多>
图片base64 解编码
汉语拼音
Unicode编码
JS混淆加密压缩
URL网址16进制加密工具
UTF-8编码转换工具
在线Ascii编码解码工具
MD5加密工具
散列/哈希 文字在线加密解密工具
在线SHA加密

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3