vue中使用微信jssdk语音聊天功能

1、绑定域名
2、引入JS文件
前面两步不细说，直接看官方文档就行，官方文档
3、wx.config配置：
在这边要注意有一个坑必须要注意一下：可能会遇到安卓系统配置正常，ios上面报签名无效配置失败。
如果是使用的hash模式的路由应该不会遇到这种情况，毕竟使用官方的方法取#前面的地址应该都是一样的。如果用的history路由模式的要注意一下：
因为用的是vue单页spa，在单页spa方面vue的history在iOS中页面地址会始终为第一次进入的链接地址。然后微信那边校验的页面地址跟我们传的不一样就会出现校验失败的问题，所以在ios中我们要判断一下，记录第一次进入的地址，然后将他传给接口就可以了。
我们可以在路由守卫中存储第一次进入的地址：

// 路由加载前
router.beforeEach((to, _from, next) => {if(!window.initUrl){window.initUrl = location.href.split('#')[0];}next()
})

 // 获取小程序配置getWxConfig() {let req = {url:'',};// 判断ios和安卓if (this.agent == 'ios') {req.url = window.initUrl;}else{req.url = window.location.href.split("#")[0];}this.$apiData.getWxConfig(req).then((res) => {if (res.data.code == "0000") {wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来。appId: data.appId, // 必填，公众号的唯一标识timestamp: data.timestamp, // 必填，生成签名的时间戳nonceStr: data.nonceStr, // 必填，生成签名的随机串signature: data.signature, // 必填，签名jsApiList: [ "startRecord","stopRecord", "playVoice","pauseVoice","stopVoice","uploadVoice", "downloadVoice","downloadVoice","translateVoice","onVoiceRecordEnd",], // 必填，需要使用的JS接口列表});} });},

4、录音

（1）、按住录音

  // 开始录音startRecord(e) {e.preventDefault();this.isCancel = false;this.startMove = e.touches[0].pageX; //获取起点坐标this.isStartVoice = true;this.translateResult = "";this.voiceTime = 0;this.voiceTime = 0;wx.startRecord({success: () => {this.voiceTimer = setInterval(() => {this.voiceTime++;}, 1000);this.voiceEnd();},cancel: () => {this.tipsHandler("用户拒绝授权录音");},});},

（2）、取消录音

 // 取消录音cancelSay(e) {e.preventDefault();this.stopMove = e.targetTouches[0].pageX; //获取滑动实时坐标//滑动距离超过100的时候显示删除和取消按钮if (this.stopMove - this.startMove > 100) {this.showDeleteIcon = true;this.isCancel = true;} else {this.showDeleteIcon = false;this.isCancel = false;}},

(3)、手指松开，停止录音

   // 松开gotouchend(e) {e.preventDefault();this.isStartVoice = false;this.showDeleteIcon = false;this.voiceStop();},

(4)、停止录音

    // 停止录音voiceStop() {wx.stopRecord({success:async (res) => {console.log(res);clearInterval(this.voiceTimer);this.voiceLocalId = res.localId;if (!this.isCancel) {this.isUploadVoice = true;await this.upVoice();await  this.translateVoice();}},fail: (error) => {this.tipsHandler(error + "语音停止失败");},});},

（5）、上传语音

  //  上传语音upVoice() {wx.uploadVoice({localId: this.voiceLocalId, // 需要上传的音频的本地ID，由stopRecord接口获得isShowProgressTips: 0, // 默认为1，显示进度提示success: (res) => {this.voiceServerId = res.serverId; // 返回音频的服务器端ID},fail: (error) => {this.isUploadVoice = false;this.tipsHandler(error + "上传失败");},});},

（6）、录音时间超过一分钟没有停止时，停止录音事件

voiceEnd() {let that = this;wx.onVoiceRecordEnd({// 录音时间超过一分钟没有停止的时候会执行 complete 回调complete: async  (res)=> {that.voiceLocalId = res.localId;clearInterval(that.voiceTimer);that.isStartVoice = false;that.showDeleteIcon = false;await  that.upVoice();await  that.translateResult();},});},

（7）、语音转换文字

 // 语音转换结果translateVoice() {let that = this;wx.translateVoice({localId: that.voiceLocalId, // 需要识别的音频的本地Id，由录音相关接口获得isShowProgressTips: 0, // 默认为1，显示进度提示success: function (res) {that.translateResult = res.translateResult; console.log(res.translateResult, "res.translateResult"); // 语音识别的结果},});},

5、播放音频
播放音频我用的audio标签，要注意的是，这里面有个坑,安卓可以正常播放，ios不能正常播放，我查了查，网上说“由于 iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio, 因此我们通过一个用户交互事件主动 play 一下 audio”
我刚开始是在点击的时候动态创建一个audio标签，我发现不太行，用了一下方法，解决了ios不能播放的问题：

 playVoice(fileCode,id){let url = 音频地址;this.playUrl(url,id);},playUrl(url,id){document.getElementById(id).setAttribute('src',url);var audio = document.getElementById(id);audio.pause();audio.play();},

6、实现效果图（我没截完，随便截了几张）：

vue中使用微信jssdk语音聊天功能相关推荐

vue中使用微信jssdk语音聊天功能，实现语音输入内容的van-field输入框组件
一.配置项 1.绑定域名 2.引入JS文件前两步直接看官方文档 3.wx.config配置: 这边要注意有一个坑必须要注意一下:可能会遇到安卓系统配置正常,ios上面报签名无效配置失败. 如果是使用 ...
java实现仿微信app聊天功能_Android仿微信语音聊天功能
本文实例讲述了Android仿微信语音聊天功能代码.分享给大家供大家参考.具体如下: 项目效果如下: 具体代码如下: AudioManager.java package com.xuliugen.we ...
在Vue中调用微信的扫描二维码功能
在Vue中调用微信的扫描二维码功能步骤新建vue文件(这里采用mint的标签库--就一个按钮~~) 关键代码 <template><div class="login_d ...
VUE项目引入微信JSSDK 实现微信自定义分享
VUE项目引入微信JSSDK 实现自定义分享前端vue.后端php 问题:后端获取config参数所需的url 需要和请求自定义分享页面url一致一.微信公众号后台添加 js安全域名(白名单) 二 ...
淘宝上线语音聊天功能
上面这个公号「涩郎」,是我的一个备用号,为了防止万一哪天大号失联,平时一周我也会发三篇左右的我的思考,读书笔记,认知感悟等文章,带领大家一起探索精神与财务自由之路. 大家好,我是校长. 昨天中午午休的 ...
如何实现消息功能_小程序中如何实现即时通信聊天功能
微信小程序是现在应用比较广的流量平台之一,当流量越来越多时,就需要在小程序中接入即时通信聊天功能来实现更好的流量变现转化,那么小程序中如何接入实现即时通信聊天功能呢? 什么是即时通信聊天功能即时通信聊 ...
在vue中获取微信支付code及code被占用问题的解决？
在vue中获取微信支付code及code被占用问题的解决? 参考文章: (1)在vue中获取微信支付code及code被占用问题的解决? (2)https://www.cnblogs.com/pana ...
android仿微信语音聊天功能,Android仿微信发送语音消息的功能及示例代码
微信的发送语音是有一个向上取消的,我们使用ontouchlistener来监听手势,然后做出相应的操作就行了. 直接上代码: //语音操作对象 private mediaplayer mplayer ...
如何正确的在项目中接入微信JS-SDK
微信JS-SDK的功能如果你点进来,那么我相信你应该知道微信的JS-SDK可以用来做什么了.微信的官方文档描述如下. 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. ...

vue中使用微信jssdk语音聊天功能

vue中使用微信jssdk语音聊天功能相关推荐

最新文章

热门文章