微信小程序语音聊天智能对话(源码)

本文实现的功能:

配置答题库,可以发送文字或者语音提问,自动匹配问题的答案回答文字显示并且读出来。

相关文章:

1.小程序聊天群,发送语音,文字,图片。

2.微信小程序集成腾讯IM,实现实时音视频通话,1V1聊天

3.云开发微信小程序聊天群

4.接入网易云信IM即时通讯的微信小程序聊天室

5.微信小程序聊天功能 WebSocket 实现发送文字,图片,语音以及WebSocket 常见问题解决方案

6.[微信小程序]聊天对话(文本,图片)的功能(完整代码附效果图)

如果有个性化的需要改造,修改样式就行,可以帮助修改。

效果图:

发送文字:

发送语音:

有问题,可以评论留言或者微信联系我。

实现代码:

const app = getApp();
//引入插件:微信同声传译
const plugin = requirePlugin('WechatSI');
//获取全局唯一的语音识别管理器recordRecoManager
const manager = plugin.getRecordRecognitionManager();
const db = wx.cloud.database();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    textInputTis:1,
    tis: '长按发送语音',
    //语音
    recordState: false, //录音状态
    content: '', //内容
    answer: '', //答案
    src: '', //答案语音
    // 当is_clock为true时识别
    is_clock: false,
    list: [{
      type: 2,
      src: '',
      text: '欢迎来到鄢电智能党务学习!',
    }]
  },
  // 发送消息
  sendOut(e) {
    var that=this
    console.log(1111, e)
    let text = e.detail.value
    if (text == '') {
      wx.showToast({
        title: '请输入聊天内容',
        icon: 'none',
      })
    } else {
      let arr = {
        type: 1,
        src: '',
        text: text
      };
      var a = that.data.list;
      a.push(arr)
      that.setData({
        content: text,
        list: a
      })
      this.answer()
    }
  },
  // 语音文字切换
  textInputTis(){
    console.log('this.data.textInputTis', this.data.textInputTis)
    if (this.data.textInputTis==1){
      this.setData({
        textInputTis:2
      })
    }else if (this.data.textInputTis == 2) {
      this.setData({
        textInputTis: 1
      })
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 


    //识别语音
    this.initRecord();
  },
  onReady() {
    //创建内部 audio 上下文 InnerAudioContext 对象。
    this.innerAudioContext = wx.createInnerAudioContext();
    this.innerAudioContext.onError(function (res) {
      console.log(res);
      wx.showToast({
        title: '语音播放失败',
        icon: 'none',
      })
    })
  },
  //识别语音 -- 初始化
  initRecord: function () {
    const that = this;
    // 有新的识别内容返回,则会调用此事件
    manager.onRecognize = function (res) {
      console.log(res)
    }
    // 正常开始录音识别时会调用此事件
    manager.onStart = function (res) {
      console.log("成功开始录音识别", res)
    }
    // 识别错误事件
    manager.onError = function (res) {
      console.error("error msg", res)
    }
    //识别结束事件
    manager.onStop = function (res) {
      console.log('..............结束录音')
      console.log('录音临时文件地址 -->' + res.tempFilePath);
      console.log('录音总时长 -->' + res.duration + 'ms');
      console.log('文件大小 --> ' + res.fileSize + 'B');
      console.log('语音内容 --> ' + res.result);
      if (res.result == '') {
        wx.showModal({
          title: '提示',
          content: '听不清楚,请重新说一遍!',
          showCancel: false,
          success: function (res) { }
        })
        return;
      }
      var text = res.result;
      text = text.replace(/[\ |\。|\~|\`|\!|\@|\#|\$|\%|\^|\&|\*|\(|\)|\-|\_|\+|\=|\||\\|\[|\]|\{|\}|\;|\:|\"|\'|\,|\<|\.|\>|\/|\?]/g, "");
      console.log('text', text)
      let arr = {
        type: 1,
        src: res.tempFilePath,
        text: res.result
      };
      var a = that.data.list;
      a.push(arr)
      console.log(333333333, a)
      that.setData({
        content: text,
        list: a
      })
      that.answer();
      that.bottom()
    }
  },
  // 匹配答案
  answer() {
    // console.log('list',this.data.list)
    var that = this
    let content = this.data.content
    db.collection("yuyin").where({
      daan: {
        $regex: '.*' + content + '.*',
        $options: '1'
      }
    }).get({
      success: res => {
        console.log('匹配', res)
        if (res.data.length == 0) {
          wx.showModal({
            title: '提示',
            content: '暂时没找到对应答案',
            showCancel: false,
            success: function (res) { }
          })
          return;
        }
        that.setData({
          answer: res.data[0].yuyin
        })
        this.wordYun()
      }
    })
  },
  bottom(){
    var that = this;
    this.setData({
      scrollTop: 100000
    })
  },
  // 答案文字转语音
  wordYun: function (e) {
    var that = this
    var that = this;
    let content = that.data.answer;
    plugin.textToSpeech({
      lang: "zh_CN",
      tts: true,
      content: content,
      success: function (res) {
        console.log(res);
        console.log("succ tts", res.filename);
        let arr = {
          type: 2,
          src: res.filename,
          text: content
        };
        var a = that.data.list;
        a.push(arr)
        that.setData({
          src: res.filename,
          list: a,

        })
        that.yuyinPlay();
        that.bottom()

      },
      fail: function (res) {
        console.log("fail tts", res)
      }
    })
  },
  // 点击并播放当前语音
  previewImage(e) {
    console.log(e)
    let src = e.currentTarget.dataset.src
    this.innerAudioContext.src = src //设置音频地址
    this.innerAudioContext.play(); //播放音频
  },
  //播放语音
  yuyinPlay: function (e) {
    if (this.data.src == '') {
      console.log('暂无语音');
      return;
    }
    this.innerAudioContext.src = this.data.src //设置音频地址
    this.innerAudioContext.play(); //播放音频
  },
  //语音  --按住说话
  touchStart: function (e) {
    console.log('长按')
    this.setData({
      recordState: true, //录音状态
      is_clock: true,
      startPoint: e.touches[0], //记录触摸点的坐标信息
      tis: '录音中...'
    })
    // 语音开始识别
    manager.start({
      lang: 'zh_CN', // 识别的语言,目前支持zh_CN en_US zh_HK sichuanhua
    })
  },
  //语音  --松开结束
  touchEnd: function (e) {
    console.log('结束')
    this.setData({
      tis: '长按发送语音'
    })
    // 语音结束识别
    manager.stop();
  },
  handleTouchMove: function (e) {
    //计算距离,当滑动的垂直距离大于25时,则取消发送语音
    if (Math.abs(e.touches[e.touches.length - 1].clientY - this.data.startPoint.clientY) > 25) {
      this.setData({
        is_clock: false //设置为不发送语音
      })
    }
  },
})

WXML

<!-- 
<view>{{content}}</view>
<view>{{answer}}</view> -->
<view class="bo">
  <scroll-view scroll-y="true" scroll-with-animation scroll-top="{{scrollTop}}">

    <block >
      <view class="body" wx:for='{{list}}' wx:key='index'>

        <view wx:if='{{item.type==1}}' class="right_body">
          <view class="flexRoe posRit">
            <view class="textBo">
              <view class="dataTime">{{item.sendOutname}} {{item.dataTime}}</view>
              <view wx:if="{{item.text!=''}}" class="ritTxt">
                <image wx:if="{{item.src!=''}}" bindtap="previewImage" mode='widthFix' data-src='{{item.src}}' src="../../img/voice.png" class="textImg"></image>
                <view>{{item.text}}</view>
              </view>

              <view wx:if="{{item.voice}}" class="ritTxt2" bindtap='my_audio_click' data-src='{{item.voice}}'>
                <image class='my_audio' src='/img/play.png'></image>
              </view>
            </view>
            <image class="head" style=" margin-left:20rpx " src="../../img/1.png"></image>
          </view>
        </view>
        <view wx:if='{{item.type==2}}' class="p_r left_body">
          <view class="flexRoe ">
            <image class="head" style=" margin-left:20rpx " src="../../img/2.png"></image>
            <view class="lfBo">
              <view class="dataTime">{{item.sendOutname}} {{item.dataTime}}</view>
              <view wx:if="{{item.text!=''}}" class="lftTxt">
                <image wx:if="{{item.src!=''}}" bindtap="previewImage" mode='widthFix' data-src='{{item.src}}' src="../../img/voice.png" class="textImg"></image>
                <view>{{item.text}}</view>
              </view>

              <view wx:if="{{item.voice}}" class="lftTxt2" bindtap='my_audio_click' data-src='{{item.voice}}'>
                <image class='my_audio' src='/img/play.png'></image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </block>
  </scroll-view>
  <view class="jifBo" wx:if="{{tis=='录音中...'}}"> 
    <image src="../../img/111.gif" mode="widthFix"></image>
  </view>
  <view class="inp">

    <view class="p_r" wx:if="{{textInputTis==1}}">
      <view class='serac_img' catch:longpress="touchStart" catch:touchmove="handleTouchMove" catch:touchend="touchEnd">
        <view>{{tis}}</view>
        <image src='../../img/voice.png' mode="widthFix"></image>
      </view>
      <view class="yuyin" bindtap="textInputTis">文字</view>
    </view>
    <view class="p_r" wx:if="{{textInputTis==2}}">
      <input class="input" placeholder-class='plaCC' confirm-type="send" bindconfirm='sendOut' placeholder='聊天,在这里' value="{{title}}"></input>
      <view class="yuyin" bindtap="textInputTis">语音</view>
    </view>
  </view>
</view>

CSS

page {
  background: #f2f2f2;

}

.top_bo {
  display: flex;
  background: white;
  flex-direction: row;
}

.top_bo view {
  flex: 1;
  font-size: 28rpx;
  text-align: center;
  border: 1rpx solid #ccc;
  line-height: 80rpx;
}

scroll-view {
  height: 90vh;
    overflow: hidden;
  padding-bottom: 30rpx;
  padding-top:50rpx;
}

.noList {
  background: white;
  margin-top: 30rpx;
  /* height: 230rpx; */
  width: 100%;
  /* padding-top: 25%; */
}

.noMsg {
  text-align: center;
  color: #999;
  font-size: 28rpx;
}

.inp {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: white;
  height: 100rpx;
}

.inp input {
  background: #d0d0d0;
  border-radius: 15rpx;
  padding-left: 20rpx;
  height: 84rpx;
  margin-top: 10rpx;
  width: 75%;
  margin-left: 2%;
}

.yuyin {
  /* width: 60rpx */
  background: #00a9ec;
  border-radius: 15rpx;
  height: 84rpx;
  line-height: 84rpx;
  color: #fff;
  padding: 0 30rpx;
  margin-left: 10rpx;
  margin-top: 10rpx;
  text-align: center;
}

.prohibit {
  background: #d0d0d0;
  border-radius: 15rpx;
  padding-left: 20rpx;
  height: 84rpx;
  margin-top: 10rpx;
  width: 94%;
  margin-left: 2%;
  text-align: center;
  line-height: 84rpx;
  color: rgb(34, 34, 34);
}

.plaCC {
  margin-left: 5rpx;
}

.p_r {
  display: flex;
  flex-direction: row;
}

.flexRoe {
  display: flex;
  flex-direction: row;
}

.body {
  width: 100%;
  position: relative;
  /* border: 1rpx solid #ccc; *//* height: 200rpx */
}

.right_body {
  width: 100%;
  /* border: 1rpx solid red; */
  padding: 20rpx;
  /* margin-top: 50rpx; */
}

.left_body {
  /* margin-top: 50rpx; */
}

.posRit {
  right: 20rpx;
}

.textBo {
  width: 620rpx;
  text-align: right;
}

.lfBo {
  margin-left: 10rpx;
}

.ritTxt {
  background: #44426a;
  padding: 10rpx 20rpx 10rpx 20rpx;
  color: white;
  border-radius: 15rpx 0 15rpx 15rpx;
  margin-top: 20rpx;
  float: right;
  max-width: 500rpx;
  word-wrap: break-word;
  text-align: left;
  font-size: 28rpx;
}

.lftTxt {
  background: #44426a;
  padding: 10rpx 20rpx 10rpx 20rpx;
  color: white;
  border-radius: 0rpx 15rpx 15rpx 15rpx;
  margin-top: 20rpx;
  float: left;
  max-width: 500rpx;
  word-wrap: break-word;
  text-align: left;
  font-size: 28rpx;
}

.my_audio {
  height: 60rpx;
  width: 60rpx;
  z-index: 2;
  position: relative;
  top: 10rpx;
  left: 20rpx;
  margin-right: 30rpx;
}

.dataTime {
  font-size: 28rpx;
}

.textImg {
  width: 50rpx;
  margin-top: 5rpx;
}

.head {
  width: 80rpx;
  height: 80rpx;
}

._ {
  height: 130rpx;
  width: 100%;
  background: #ccc;
}

.serac_img {
  width: 75%;
  display: flex;
  flex-direction: row;
  background: #d0d0d0;
  border-radius: 15rpx;
  padding-left: 20rpx;
  /* height: 84rpx; */
  margin-top: 10rpx;
  margin-left: 2%;
}

.serac_img view {
  width: 70%;
  text-align: right;
  line-height: 80rpx;
  color: #bfbfbf;
}

.serac_img image {
  width: 50rpx;
  margin-top: 25rpx;
}
.jifBo{
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
}
.jifBo image{
  width: 40%;
  margin-left: 30%;
  margin-top: 50%;
  
}

 

已标记关键词 清除标记
相关推荐
简介 笔者当初为了学习JAVA,收集了很多经典源码源码难易程度分为初级、中级、高级等,详情看源码列表,需要的可以直接下载! 这些源码反映了那时那景笔者对未来的盲目,对代码的热情、执着,对IT的憧憬、向往!此时此景,笔者只专注Android、Iphone等移动平台开发,看着这些源码心中有万分感慨,写此文章纪念那时那景! Java 源码包 Applet钢琴模拟程序java源码 2个目标文件,提供基本的音乐编辑功能。编辑音乐软件的朋友,这款实例会对你有所帮助。 Calendar万年历 1个目标文件 EJB 模拟银行ATM流程及操作源代码 6个目标文件,EJB来模拟银行ATM机的流程及操作:获取系统属性,初始化JNDI,取得Home对象的引用,创建EJB对象,并将当前的计数器初始化,调用每一个EJB对象的count()方法,保证Bean正常被激活和钝化,EJB对象是用完毕,从内存中清除,从账户中取出amt,如果amt>账户余额抛出异常,一个实体Bean可以表示不同的数据实例,我们应该通过主键来判断删除哪个数据实例…… ejbCreate函数用于初始化一个EJB实例 5个目标文件,演示Address EJB的实现 ,创建一个EJB测试客户端,得到名字上下文,查询jndi名,通过强制转型得到Home接口,getInitialContext()函数返回一个经过初始化的上下文,用client的getHome()函数调用Home接口函数得到远程接口的引用,用远程接口的引用访问EJB。 EJB中JNDI的使用源码例子 1个目标文件,JNDI的使用例子,有源代码,可以下载参考,JNDI的使用,初始化Context,它是连接JNDI树的起始点,查找你要的对象,打印找到的对象,关闭Context…… ftp文件传输 2个目标文件,FTP的目标是:(1)提高文件的共享性(计算机程序和/或数据),(2)鼓励间接地(通过程序)使用远程计算机,(3)保护用户因主机之间的文件存储系统导致的变化,(4)为了可靠和高效地传输,虽然用户可以在终端上直接地使用它,但是它的主要作用是供程序使用的。本规范尝试满足大型主机、微型主机、个人工作站、和TACs 的不同需求。例如,容易实现协议的设计。 Java EJB中有、无状态SessionBean的两个例子 两个例子,无状态SessionBean可会话Bean必须实现SessionBean,获取系统属性,初始化JNDI,取得Home对象的引用,创建EJB对象,计算利息等;在有状态SessionBean中,用累加器,以对话状态存储起来,创建EJB对象,并将当前的计数器初始化,调用每一个EJB对象的count()方法,保证Bean正常被激活和钝化,EJB对象是用完毕,从内存中清除…… Java Socket 聊天通信演示代码 2个目标文件,一个服务器,一个客户端。 Java Telnet客户端实例源码 一个目标文件,演示Socket的使用。 Java 组播组中发送和接受数据实例 3个目标文件。 Java读写文本文件的示例代码 1个目标文件。 java俄罗斯方块 一个目标文件。 Java非对称加密源码实例 1个目标文件 摘要:Java源码,算法相关,非对称加密   Java非对称加密源程序代码实例,本例中使用RSA加密技术,定义加密算法可用 DES,DESede,Blowfish等。   设定字符串为“张三,你好,我是李四”   产生张三的密钥对(keyPairZhang)   张三生成公钥(publicKeyZhang)并发送给李四,这里发送的是公钥的数组字节   通过网络或磁盘等方式,把公钥编码传送给李四,李四接收到张三编码后的公钥,将其解码,李四用张三的公钥加密信息,并发送给李四,张三用自己的私钥解密从李四处收到的信息…… Java利用DES私钥对称加密代码实例 同上 java聊天室 2个目标文件,简单。 java模拟掷骰子2个 1个目标文件,输出演示。 java凭图游戏 一个目标文件,简单。 java求一个整数的因子 如题。 Java生成密钥的实例 1个目标文件 摘要:Java源码,算法相关,密钥   Java生成密钥、保存密钥的实例源码,通过本源码可以了解到Java如何产生单钥加密的密钥(myKey)、产生双钥的密钥对(keyPair)、如何保存公钥的字节数组、保存私钥到文件privateKey.dat、如何用Java对象序列化保存私钥,通常应对私钥加密后再保存、如何从文件中得到公钥编码的字节数组、如何从字节数组解码公钥。 Java数据压缩与传输实例 1个目标文件 摘要:Java源码,文件操作,数据压缩,文件传输   Java数据压缩与传输实例,可以学习一下实例化套按字、得到文件输入流、压缩输入流、文件输出流、实例化缓冲
©️2020 CSDN 皮肤主题: 成长之路 设计师:Amelia_0503 返回首页
实付 49.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值