这次是1.0版本的更新，整体设计请参考上一篇文章： 手把手教你做自然语言理解智能对话的微信小程序【完整源码分享】本次更新内容：1.键盘输入框和语音输入的切换2.语音输入图标扫码0，键盘输入图标点击发送3.音频播放首先我们要实现一个语音聊天的功能，这需要用到微信小程序的音频接口，我们需要用到 wx.startRecord 和 wx.stopRecord，分别用来开始录音和停止录音。
在 wxml 文件中我们可以放置一个按钮，用来触发录音的开始和停止。当用户点击按钮的时候，我们可以调用 wx.startRecord 来开始录音，当用户再次点击按钮的时候，我们可以调用 wx.stopRecord 来停止录音。
在开始录音的时候，我们可以在界面上显示一个音波图，来表示录音的声音大小。我们可以通过 wx.getRecorderManager 来获得录音的音量大小，并把这个音量显示在界面上。当用户停止录音的时候，我们可以把录音的文件保存，然后上传到服务器。
在语音输入的时候，用户也可以通过语音来与机器人进行聊天。在录音结束后，我们可以把录音的文件上传到服务器，然后服务器会把录音文件转换成文本，并返回给客户端。
接下来我们来讲一下键盘输入框和语音输入的切换的功能。我们可以在界面上放置一个输入框，用户可以在输入框中输入文字，然后按下发送按钮来发送消息。当用户点击语音输入图标时，我们需要调用 wx.startRecord 来开始录音，当用户再次点击语音输入图标时，我们需要调用 wx.stopRecord 来停止录音。
在用户切换输入方式的时候，我们需要通过改变界面的布局来实现键盘输入框和语音输入的切换。当用户选择语音输入的时候，我们需要隐藏键盘输入框，并显示语音输入图标。当用户选择键盘输入的时候，我们需要隐藏语音输入图标，并显示键盘输入框。
另外，我们还需要实现音频播放的功能。当用户收到机器人返回的语音回复时，我们需要把语音文件下载下来，并通过 wx.playVoice 来播放语音文件。
下面是一个实现微信小程序语音聊天智能对话的核心源码示例：
1. wxml 文件：
```
```
2. js 文件：
```javascriptPage({
data: {
voiceInputIcon: 'voice_input.png',
waveImagePath: 'wave.png',
isRecording: false,
chatList: [],
},
voiceInput() {
// 切换到语音输入 // 隐藏输入框，显示语音波动图像 this.setData({
voiceInputIcon: 'keyboard_input.png',
isRecording: true,
});
wx.startRecord({
success(res) {
const tempFilePath = res.tempFilePath;
//上传录音文件到服务器 wx.uploadFile({
url: ' filePath: tempFilePath,
name: 'voice',
success(res) {
const data = res.data;
//从服务器返回的数据中获取文字消息 const message = data.message;
// 把消息添加到聊天列表中 const chatList = this.data.chatList;
chatList.push({ type: 'voice', content: tempFilePath });
chatList.push({ type: 'text', content: message });
this.setData({
chatList: chatList,
});
}
});
},
complete() {
this.setData({
isRecording: false,
});
}
});
},
inputHandler(e) {
// 处理输入框输入事件 const value = e.detail.value;
// ...
},
sendMessage() {
// 发送文字消息 // 获取输入框中的文字消息 const message = 'Hello';
// 把消息添加到聊天列表中 const chatList = this.data.chatList;
chatList.push({ type: 'text', content: message });
this.setData({
chatList: chatList,
});
// 清空输入框 // ...
},
});
```
以上代码实现了微信小程序语音聊天智能对话的核心功能，包括键盘输入框和语音输入的切换、音频播放等功能。用户可以根据实际需求进行扩展和定制。希望这个示例对你有所帮助！
