最近在开发app端的h5的聊天功能里面包括了（文字、语音），也在网上搜索了很多资料，但是都是东一点，西一点，不全的知识，花的多的时间有段的在测试中，所以自己在开发完，分享出来希望能大家一点帮助！！
创建一个聊天组件
里面包括了文字和语音发送，但是这次重点讲的语音功能
创建一个按钮
<view @click="touchstart"> 开始录音 </view>
调用方法
讲一下下面代码的具体意思：
1､写了一个定时器，限制录音时长，超过60s就关闭
2､录音没有超时就调用app端提供的方法
关于这个录音方法要以app端的提供的方法为准，这里不能直接拿我的代码，我只能提供整这个功能实现的思路！
touchstart(e) {
console.log("开始录音");
console.log("点击产生数据", e);
this.pageY = e.changedTouches[0].pageY;
this.voicebg = true;
let i = 1;
this.timer = setInterval(() => {
this.vlength = i;
i++;
//结束计时
if (i > 60) {
clearInterval(this.timer);
this.touchend();
}
}, 1000);
if (window.NativeHandler) {
window.NativeHandler.showAudioRecordDialog()
} else {
window.webkit.messageHandlers.showAudioRecordDialog.postMessage({})
}
},
获取录音成功返回的数据
讲一下下面代码的具体意思：
1､uploadAudioFile 这个方法也是app端提前注入进去的，所以才能通过window.拿到这个方法，这个方法带了一个json字符串参数，
2､拿到语音文件和语音秒数，组装起来，通过send方法传进去
3､send方法里面在组装数据，通过 emit方法传到父组件
created() {
window.uploadAudioFile = (respBody) => {
clearInterval(this.timer);
this.audio = JSON.parse(respBody).result.url;
let data = {
voice: this.audio,
time: this.vlength,
};
this.send(data, 2)
//时长归位
setTimeout(() => {
this.vlength = 0;
this.voicebg = false;
}, 0);
}
},
methods: {
//发送
send(msg, type) {
let date = {
message: msg,
type: type,
};
this.$emit("inputs", date);
setTimeout(() => {
this.msg = "";
}, 0);
},
}
页面
引用组件
<submit @inputs="inputs" @heights="heights"></submit>
inputs方法拿到数据
拿到语音数据，进行处理成你想要的数据，显示到页面上
inputs(e) {
console.log('e',e)
}
语音播放暂停
这个是调用uni-app里面自带的方法uni.createInnerAudioContext()
页面引用
item.sendText.voice 这个参数是语音链接数据
<view @tap="playVoice(item.sendText.voice)">
</view>
方法调用
playVoice(e) {
if(!this.isPlaying(innerAudioContext)){
innerAudioContext.src = e;
// 播放
innerAudioContext.play();
} else {
//暂停
innerAudioContext.stop();
}
},
// 判断是否正在播放语音
isPlaying(audelem) {
return !audelem.paused;
}
总结
整个功能开发完成，一个花了差不多一天时间，里面包括了跟app端开发沟通，前端如果实现这个功能所需要的查找的资料，没做之前感觉这个功能有点难，如果有开发过这个功能，那就是几个小时就能完成，花了大部分时间在找资料，看文档（uni-app文档），希望对大家有所帮助！！！
每次写文章的时候，又是对这个功能一次开发和加深印象，也提升自己对技术的理解和总结，最后希望大家多多分享，让大家可以快乐的开发。
