微信小程序语音聊天智能对话（源码分享）

“智能聊”：微信小程序详解

这次是1.0版本的更新，整体设计请参考上一篇文章：

手把手教你做自然语言理解智能对话的微信小程序【完整源码分享】

本次更新内容：

1.键盘输入框和语音输入的切换

2.语音输入图标

扫码体验（小程序名：智能聊）





本次更新之后的源码：

百度云：https://pan.baidu.com/s/1jHJj1HG

更新之后的界面：



录音中



废话不多说，直接上代码：

index.wxml

<view class="container">
<scroll-view class="scrool-view" scroll-y="true" scroll-with-animation="true" scroll-into-view="{{scrolltop}}" enable-back-to-top="true">
<view class="chat-list">
<block wx:for="{{chatList}}" wx:key="time">
<view id="roll{{index + 1}}" class="chat-left" wx:if="{{item.orientation == 'l'}}">
<image class="avatar-img" src="/res/image/chat_logo.png"></image>
<text>{{item.text}}</text>
<image class="avatar-img"></image>
</view>
<view id="roll{{index + 1}}" class="chat-right" wx:if="{{item.orientation == 'r'}}">
<image class="avatar-img"></image>
<text>{{item.text}}{{item.url}}</text>
<image class="avatar-img" src="{{userLogoUrl}}"></image>
</view>
</block>
</view>
</scroll-view>
<view class="showAuthor weui-footer weui-footer__text"><view id="rollend" class="olamicontent">语义解析技术由OLAMI提供</view><view class="author" bindtap="contactMe">联系作者</view></view>
<form bindsubmit="sendChat">
<view class="ask-input-word">
<image class="text-video-img" src="/res/image/speak.png" hidden="{{keyboard}}" bindtap="switchInputType"></image>
<image class="text-video-img" src="/res/image/keyboard.png" hidden="{{!keyboard}}" bindtap="switchInputType"></image>
<input class="input-big" hidden="{{keyboard}}" focus="{{!keyboard}}" placeholder="" confirm-type="send" name="ask_word" type="text" bindconfirm="sendChat" bindinput="Typing" value="{{askWord}}" />
<button hidden="{{!keyboard}}" bindtouchstart="touchdown" bindtouchend="touchup">按住 说话</button>
</view>
</form>
</view>
<image class="speaker" hidden="{{!isSpeaking}}" src="{{speakerUrl}}"></image>

使用keyboard来控制文本框和语音输入的切换，最后的image是语音输入时的图标。

JS控制代码

index.js（部分代码）

......(省略部分代码)
// 切换语音输入和文字输入
switchInputType:function(){
this.setData({
keyboard: !(this.data.keyboard),
})
},
// 按钮按下
touchdown:function(){
this.setData({
isSpeaking : true,
})
that.speaking.call();
console.log("[Console log]:Touch down!Start recording!");
// 开始录音
wx.startRecord({
'success':function(res){
var tempFilePath = res.tempFilePath;
that.data.filePath = tempFilePath;
console.log("[Console log]:Record success!File path:" + tempFilePath);
that.voiceToChar();
},
'fail':function(){
console.log("[Console log]:Record failed!");
wx.showModal({
title: '录音失败',
content:'换根手指再试一次！',
showCancel: false,
confirmText: '确定',
confirmColor: '#09BB07',
})
},
});
},
// 按钮松开
touchup:function(){
wx.stopRecord();
console.log("[Console log]:Touch up!Stop recording!");
this.setData({
isSpeaking: false,
speakerUrl: '/res/image/speaker0.png',
})
clearInterval(that.speakerInterval);
},
// 语音转文字
voiceToChar:function(){
var urls = app.globalData.slikToCharUrl;
var voiceFilePath = that.data.filePath;
if(voiceFilePath == null){
console.log("[Console log]:File path do not exist!");
wx.showModal({
title: '录音文件不存在',
content: '我也不知道哪错了，反正你就再试一次吧！',
showCancel: false,
confirmText: '确定',
confirmColor: '#09BB07',
})
return;
}
var appkey = app.globalData.NLPAppkey;
var appsecret = app.globalData.NLPAppSecret;
var NLPCusid = app.globalData.NLPCusid;
wx.showLoading({
title: '语音识别中...',
})
// 语音识别
wx.uploadFile({
url: urls,
filePath: voiceFilePath,
name: 'file',
formData: { "appKey": appkey, "appSecret": appsecret, "userId": NLPCusid },
header: { 'content-type': 'multipart/form-data' },
success: function (res) {
wx.hideLoading();
var data = JSON.parse(res.data);
var seg = JSON.parse(data.result).seg;
console.log("[Console log]:Voice to char:" + seg);
if(seg == null || seg.length == 0){
wx.showModal({
title: '录音识别失败',
content: "我什么都没听到，你再说一遍！",
showCancel: false,
success: function (res) {
}
});
return;
}
that.addChat(seg, 'r');
console.log("[Console log]:Add user voice input to chat list");
that.sendRequest(seg);
return;
},
fail: function (res) {
console.log("[Console log]:Voice upload failed:" + res.errMsg);
wx.hideLoading();
wx.showModal({
title: '录音识别失败',
content: "请你离WIFI近一点再试一次！",
showCancel: false,
success: function (res) {
}
});
}
});
},
// 联系作者
contactMe:function(){
if(that.data.contactFlag){
// 语义平台自定义回复，有问题可以联系博主
// 此处也可以调用addChat直接添加回复。
that.sendRequest("");
}
else{
wx.showModal({
title: '提示',
content: '你都点过了，还点干嘛！！',
showCancel:false,
});
}
that.data.contactFlag = false;
},
// 麦克风帧动画
speaking:function() {
// 话筒帧动画
var i = 0;
that.speakerInterval = setInterval(function () {
i++;
i = i % 7;
that.setData({
speakerUrl: that.data.speakerUrlPrefix + i + that.data.speakerUrlSuffix,
});
console.log("[Console log]:Speaker image changing...");
}, 300);
}
......(省略部分代码)

本次更新的语音识别的功能由@happycxz搭建的服务器提供的，具体的搭建过程可以参考博客微信小程序语音识别服务搭建全过程解析（内附免费的供小程序语音识别的https服务）

如有任何问题可以联系博主。