手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

iH5使用教程:如何实现HTML5语音识别功能

时间:2024-10-14 07:36:52

1、登陆官方网站,打开编辑器页面,本次是教大家实现一个我们说出一些词语,然后H5能自动识别跳转到词语相对应的页面。设置页面并导入语音识别需要用到的图片素材以及文本。

iH5使用教程:如何实现HTML5语音识别功能
iH5使用教程:如何实现HTML5语音识别功能

2、为了能让H5能收录我们说的话,我们在起始页下创建一个空白音频,插入变量功能

iH5使用教程:如何实现HTML5语音识别功能

3、现在开始关键的操作了:实现当我们手机按下录音的按钮时开始录音。在录音麦克风图标下设置事件——手指按下——微信开始录音,把目标对象选择为上述新建的空白音频

iH5使用教程:如何实现HTML5语音识别功能

4、设置说话的时间轴。设置时间轴时长为2.5秒,关闭自动播放和循环播放(按下2.5S即自动停止录音)。特别注意:此设置对于安桌系统的吹涡皋陕用户来说需要格外注意,因为最近更新的安桌版微信中使用上述逻辑会导致微信系统逻辑错乱,出现一按录音就马上停止录音的现象,所以目前建议先设置录音时间轴长来避免这种错误的发生,等下版本微信系统修复即可正常使用。(PS:苹果系统可以跳过此步骤,直接设置手指按下开始录音、手指离开结束录音即可)稳健式解决方法:设置两个独立按钮,分别设置事件为点击开始录音、点击结束录音。

iH5使用教程:如何实现HTML5语音识别功能

5、设置交互识别文本。把需要识别的文本进行文字拆分设置事件,如浪漫都市拆分为浪漫、都市(当系统识别到浪漫/都市时就能自动跳转到巴黎页面,为了提高语音识别交互的准确性与完整性),对拆分后的关键词事件设置触发条件为:包含文本,选择动作为跳转页面,目标为相对应的跳转内容。

iH5使用教程:如何实现HTML5语音识别功能

6、编辑完成后,试试点击预览按钮进行预览,功能正常就可以发布上线了哦,听得懂人话儿的语音识别功能H5大功告成。

© 手抄报圈