宝宝闪卡小程序 - 跟读评测设计
发布于 3 年前 作者 yfu 3987 次浏览 来自 分享

做单词类的小程序,跟读评测是绕不过去的一个功能,但是本身又不具备AI能力,就想这个功能是不是可以往后放放,但是发现如果不做评测,后续的练习就只能有听音选图一种形式,而练习应该是从听,读上进行全面的考察,而且没有孩子方面的输出,也很难看到学习成果,索性抽个时间做了,这里记录下实现的思路。

首先是状态,针对跟读应该分为以下几种状态:

  • 播放标准音频
  • 未录音状态
  • 录音中状态
  • 录音完毕,播放录音音频
  • 打分完毕

针对上面的不同状态,为了更方便用户理解,要设计不同的引导方案及展示效果,对此我的设计如下

虽然相对来说还是比较简陋,但是目前来看至少可以清楚的分开当前进行中的每一种状态,其中在到达最后一个状态时,同步会有星星的展示以及TTS播放。下面简单描述一下每个状态的要点。

1.播放标准音频过程

当打开跟读的悬浮窗时,音频同步播放,在此状态下,按钮不可点击,音频播放完毕状态过度为[2],再次点击黑板,则重复当前状态

2.未播音状态

在未播音状态下,此时innerAudioContext与recordManager均已就绪,用户点击则调用start开启录音,也可以再次播放标准音频。

3.录音中状态

录音状态下再次点击应调用stop停止录音,此时可以获取到用户录音临时文件。

4.发音播放中

利用 innerAudioContext 播放录制的临时文件,同时应该在音频的播放过程中开启调用三方api进行评测,并在评测的回调中同步保存孩子发音音频文件以及数据库中插入本次跟读的成绩记录,评测完成后会有相应的星星展示以及音频播放,这里为了更直观的展示孩子的发音效果,将分数转化为了星星进行展示,但是数据中存入的数据仍旧为原始分数,这样可以更好的契合不同的展示场景。

5.打分完毕

此时应该重置一切状态,出文案外,与状态1相同。

上面是整个过程的流转,具体的代码不做赘述,但是在开发的过程中还是遇到了一些小问题。

首先是利用innerAudio播放云文件时,会报文件错误,在多次尝试及查阅资料无果后,增加了一步用云文件id换取临时https链接,这样解决了问题,

第二个问题是兼容问题,在iphone12真机测试下,recorder初次初始化需要一定时间,大概在前一秒是录不上任何声音的,后续再次调用无问题,安卓机下也无此问题。由于录音需要向用户申请权限,所以没有办法提前初始化,在尝试了多款小程序后,均发现有此问题,鉴于影响较小,后续没有做其他处理,如果有哪位有解决方案,还望不吝赐教。


1 回复

好厉害哇

回到顶部