年前做了一期语音口令的年度活动，从语音录制、上传到智能检测，以及后续的语音播放组件，语音录制的实现的方式是基于微信的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 (将录制的临时音频文件上传至微信服务，供服务)

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

代码层：

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

let vm = null

import _wx from '../../../static/wx.js' // JS-SDK

require('es6-promise').polyfill()

export default {

data () {

return {

isAudioState: 0, // 0 未录制or检测完毕 1 录制中 2 检测中

secondNum: 0 // 音频时长

}

},

filters: {

},

created: function () {

vm = this

},

methods: {

audioStart (e) {

// 开始录制

e.preventDefault() // 解决touch时触发下拉 松开后无法touchend的情况

_wx.startRecord()

this.count_time()

this.isAudioState = 1

},

audioEnd () {

// 结束录制

vm.isAudioState = 0

clearInterval(this.setIvWrap)

vm.isAudioState = 2 // 方便本地观测 动态 测试通过后注释即可

var params = {

async success (res) {

this.limit_time() // 时间限制

vm.isAudioState = 2 // 实际检测动效

const testdata = await vm.check_text(res)

if (!testdata.translateResult) { // 未检测语音

console.log('人家没听明白你说啥，再读一下')

return

}

_wx.uploadVoice({

localId: res.localId,

isShowProgressTips: 0,

success (updata) {

console.log('上传成功')

}

})

}

}

_wx.stopRecord(params)

},

check_text (res) {

// 智能校验

return new Promise((resolve, reject) => {

_wx.translateVoice({

localId: res.localId,

isShowProgressTips: 0,

success (testdata) {

resolve(testdata)

}

})

})

},

count_time () {

// 计算音频时长

clearInterval(this.setIvWrap)

this.secondNum = 0

this.setIvWrap = setInterval(() => {

this.secondNum ++

if (this.secondNum >= 15) {

this.audioEnd()

}

}, 1000)

},

limit_time () {

// 音频时长限制

if (vm.secondNum >= 15 || vm.secondNum <= 3) {

console.log(vm.secondNum ? '最多录制15s' : '录制时长不得小于3s')

return

}

}

},

mounted () {

},

components: {

}

}

img{ pointer-events: none; } // 取消某些浏览器的默认事件

.audio-img{

width: 1.4rem;

height: 1.4rem;

margin: 0 auto;

position: relative;

img{

width: 100%;

height: 100%;

position: absolute;

left: 0;

top: 0;

z-index: 1;

}

.mark-image{

position: absolute;

left: 0;

top: 0;

width: 100%;height: 100%;

z-index: 1;

}

.wave-wrap{

position: absolute;

left: 0;

top: 0;

width: 100%;height: 100%;

z-index: 0;

.wave{

position: absolute;

left: 1%;

top: 1%;

width: 98%;

height: 98%;

border-radius: 50%;

z-index: 1;

}

.wave-1{

background: #d6382f;

animation: scale-wave1 2s linear infinite;

}

.wave-2{

background: #e37f6a;

animation: scale-wave2 2s linear infinite;

}

.wave-3{

background: #e37f6a;

animation: scale-wave2 2s 1s linear infinite;

}

}

.roate-wrap{

position: absolute;

left: -0.21rem;

top: -0.21rem;

width: 100%;

height: 100%;

padding: 0.25rem;

z-index: 0;

animation: roate-test 2s linear infinite;

-webkit-animation: roate-test 2s linear infinite;

}

}

.audio-text{

margin-top: 0.3rem;

color: #fff;

text-align: center;

}

@keyframes scale-wave1 {

0%{

opacity: 1;

transform: scale(1)

}

100%{

transform: scale(1.35);

opacity: 0;

}

}

@keyframes scale-wave2 {

0%{

opacity: 1;

transform: scale(1)

}

100%{

opacity: 0;

transform: scale(1.9)

}

}

@keyframes roate-test {

0%{

transform: rotate(0);

}

100%{

transform: rotate(360deg);

}

}

注意事项：

上述逻辑中均为同步操作，以应对服务端异步获取当次录音的音频文件(目的在于需确报本次音频上传成功后再与服务端交互)；

微信音频格式为speex，需转格；

部分浏览器存在touch img呈现预览模式的解决方案，img{ pointer-events: none; }；

audioStart时，部分浏览器存在用户同时触发下拉动作后松手无法touchend的情况，需preventDefault操作;

米8在触发上传、检测api时，会造成检测动画的卡顿，(其他机型没问题)，初步怀疑是线程阻塞，有兴趣的可以一块研究一下，欢迎科普哈~