移动端语音html,掘金：H5实现移动端语音录制功能

年前做了一期语音口令的年度活动，从语音录制、上传到智能检测，以及后续的语音播放组件，语音录制的实现的方式是基于微信的JSSDK，本篇主要把语音录制板块整理了一下，供大家参考；

各位看官先上眼：

功能梳理：

视图层

定义动态效果状态标识

区分几种录制状态isAudioState: 0 // 0 未录制or检测完毕 1 录制中 2 检测中：未录制or检测完毕 / 0 无动效：录制中 / 1 波浪纹：检测中 / 2 环形检测

设置动态效果切换状态

通过监听touchstart/touchend事件去切换动态效果

逻辑层

录制、上传、检测功能

时间限制(时间区间)、内容为空的兼容处理

touchstart事件中做了哪些事

1.开启录音2.切换录音中状态3.开始计时，用于记录音频时长

touchend事件中做了哪些事

1.停止录音2.智能检测3.控制录音时长4.上传音频5.切换录音结束状态(是否开始检测)

USE API(JS-SDK)

开始录制 startRecord

停止录制 stopRecord

智能检测 translateVoice (将语音转文字)

上传音频 uploadVoice (将录制的临时音频文件上传至微信服务，供服务)

这里就不赘述了，可以去猫一眼微信的官方文档 点击前往

代码层：

注：所有逻辑均在此组件，父级组件引入即可