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

主页

主页面的实现在文件：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
浏览：645

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

要遵循它，您必须了解 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]删除
最新教程 更多>
  • Java为何无法创建泛型数组？
    Java为何无法创建泛型数组？
    通用阵列创建错误 arrayList [2]; JAVA报告了“通用数组创建”错误。为什么不允许这样做？答案：Create an Auxiliary Class:public static ArrayList<myObject>[] a = new ArrayList<myO...
    编程 发布于2025-04-24
  • 将图片浮动到底部右侧并环绕文字的技巧
    将图片浮动到底部右侧并环绕文字的技巧
    在Web设计中围绕在Web设计中，有时可以将图像浮动到页面右下角，从而使文本围绕它缠绕。这可以在有效地展示图像的同时创建一个吸引人的视觉效果。 css位置在右下角，使用css float and clear properties： img { 浮点：对； ...
    编程 发布于2025-04-24
  • 在JavaScript中如何并发运行异步操作并正确处理错误？
    在JavaScript中如何并发运行异步操作并正确处理错误？
    同意操作execution 在执行asynchronous操作时，相关的代码段落会遇到一个问题，当执行asynchronous操作：此实现在启动下一个操作之前依次等待每个操作的完成。要启用并发执行，需要进行修改的方法。 第一个解决方案试图通过获得每个操作的承诺来解决此问题，然后单独等待它们： co...
    编程 发布于2025-04-24
  • 可以在纯CS中将多个粘性元素彼此堆叠在一起吗？
    可以在纯CS中将多个粘性元素彼此堆叠在一起吗？
    [2这里： https：//webthemez.com/demo/sticky-multi-header-scroll/index.html &lt;/main&gt; &lt;section&gt; { display：grid; grid-template-...
    编程 发布于2025-04-24
  • Java数组中元素位置查找技巧
    Java数组中元素位置查找技巧
    在Java数组中检索元素的位置 利用Java的反射API将数组转换为列表中，允许您使用indexof方法。 （primitives）（链接到Mishax的解决方案） 用于排序阵列的数组此方法此方法返回元素的索引，如果发现了元素的索引，或一个负值，指示应放置元素的插入点。
    编程 发布于2025-04-24
  • 解决MySQL错误1153：数据包超出'max_allowed_packet'限制
    解决MySQL错误1153：数据包超出'max_allowed_packet'限制
    mysql错误1153：故障排除比“ max_allowed_pa​​cket” bytes 更大的数据包，用于面对阴谋mysql错误1153，同时导入数据capase doft a Database dust？让我们深入研究罪魁祸首并探索解决方案以纠正此问题。理解错误此错误表明在导入过程中接...
    编程 发布于2025-04-24
  • 为什么在我的Linux服务器上安装Archive_Zip后，我找不到“ class \” class \'ziparchive \'错误？
    为什么在我的Linux服务器上安装Archive_Zip后，我找不到“ class \” class \'ziparchive \'错误？
    Class 'ZipArchive' Not Found Error While Installing Archive_Zip on Linux ServerSymptom:When attempting to run a script that utilizes the ZipAr...
    编程 发布于2025-04-24
  • 如何在JavaScript对象中动态设置键？
    如何在JavaScript对象中动态设置键？
    在尝试为JavaScript对象创建动态键时，如何使用此Syntax jsObj['key' i] = 'example' 1;不工作。正确的方法采用方括号： jsobj ['key''i] ='example'1; 在JavaScript中，数组是一...
    编程 发布于2025-04-24
  • 如何使用FormData（）处理多个文件上传？
    如何使用FormData（）处理多个文件上传？
    ）处理多个文件输入时，通常需要处理多个文件上传时，通常是必要的。 The fd.append("fileToUpload[]", files[x]); method can be used for this purpose, allowing you to send multi...
    编程 发布于2025-04-24
  • 如何克服PHP的功能重新定义限制？
    如何克服PHP的功能重新定义限制？
    克服PHP的函数重新定义限制在PHP中，多次定义一个相同名称的函数是一个no-no。尝试这样做，如提供的代码段所示，将导致可怕的“不能重新列出”错误。 但是，PHP工具腰带中有一个隐藏的宝石：runkit扩展。它使您能够灵活地重新定义函数。 runkit_function_renction_re...
    编程 发布于2025-04-24
  • 如何将多种用户类型（学生，老师和管理员）重定向到Firebase应用中的各自活动？
    如何将多种用户类型（学生，老师和管理员）重定向到Firebase应用中的各自活动？
    Red: How to Redirect Multiple User Types to Respective ActivitiesUnderstanding the ProblemIn a Firebase-based voting app with three distinct user type...
    编程 发布于2025-04-24
  • HTML格式标签
    HTML格式标签
    HTML 格式化元素 **HTML Formatting is a process of formatting text for better look and feel. HTML provides us ability to format text without us...
    编程 发布于2025-04-24
  • 在JavaScript中如何获取实际渲染的字体，当CSS字体属性未定义时？
    在JavaScript中如何获取实际渲染的字体，当CSS字体属性未定义时？
    Accessing Actual Rendered Font when Undefined in CSSWhen accessing the font properties of an element, the JavaScript object.style.fontFamily and objec...
    编程 发布于2025-04-24
  • 如何在其容器中为DIV创建平滑的左右CSS动画？
    如何在其容器中为DIV创建平滑的左右CSS动画？
    通用CSS动画，用于左右运动 ，我们将探索创建一个通用的CSS动画，以向左和右移动DIV，从而到达其容器的边缘。该动画可以应用于具有绝对定位的任何div，无论其未知长度如何。问题：使用左直接导致瞬时消失 更加流畅的解决方案：混合转换和左 [并实现平稳的，线性的运动，我们介绍了线性的转换。这...
    编程 发布于2025-04-24
  • Python中嵌套函数与闭包的区别是什么
    Python中嵌套函数与闭包的区别是什么
    嵌套函数与python 在python中的嵌套函数不被考虑闭合，因为它们不符合以下要求：不访问局部范围scliables to incling scliables在封装范围外执行范围的局部范围。 make_printer（msg）： DEF打印机（）： 打印（味精） ...
    编程 发布于2025-04-24
分类更多>
学日语 学韩语 学中文 学外语 游戏 常见问题 科技周边 人工智能 软件教程 编程 文章

学习中文

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

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

Copyright© 2022 湘ICP备2022001581号-3