微信语音（录音，上传，下载，播放，停止）

1.api:微信:JSSDK https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

（1）初始化微信：一般在socket初始化后

initWx() {let _this = this;wx.config(_this.wxConfig);//检测环境是否能使用下面方法wx.checkJsApi({jsApiList: ['startRecord','onVoiceRecordEnd','stopRecord','playVoice','pauseVoice','stopVoice','onVoicePlayEnd','uploadVoice','downloadVoice'],success:function(res) {console.log(222222222);console.log(res);alert(JSON.stringify(res));}});       wx.ready(function () {//微信初始化完成时检测是否同意启用录音功能wx.startRecord({success:function(res) {wx.stopRecord({success: function (res) {// var localId = res.localId;}});}});});},

(1)录音

<div class="msg_input_voice" v-if="popup_status == 3"><div class="input_voice_wrap" :class="{recording:recording}"><div class="voice_btn" ref="voiceBtn" @touchstart="onTouchstart" @touchmove="onTouchmove" @touchend="onTouchend"> <span>长按说话</span></div></div><div class="voice_toast"  :class="{voiceWarning:cancelVoice}" v-if="recording"><div class="voice_toast_wrap"><div class="semicircle1" ref="semicircle1"></div><div class="semicircle2" ref="semicircle2"></div><div class="semicircle3" ref="semicircle3"></div><div class="voice_length"><img src="../assets/images/chats/cancel_icon.png" v-if="cancelVoice"><span v-else>{{voiceTimeing}}"</span></div></div><span class="voice_toast_text">{{voice_toast_text}}</span></div>
</div>

onTouchstart:function(e){e.preventDefault();var _this = this;_this.voiceTimeing = 0;if(_this.recording == false) {_this.pageY = e.touches[0].pageY;_this.startTime = new Date().getTime();_this.timeOutVoice = setTimeout(function(){_this.longClickVoice = true;// _this.$fui.toast("长按");if(_this.voiceTimeingOut) {clearInterval(_this.voiceTimeingOut);_this.voiceTimeingOut = null;}_this.voiceTimeing = 0;//开始录音wx.startRecord({success:function() {// _this.$fui.toast("录音开始");_this.recording = true;_this.voiceTimeingOut = setInterval(function() {//环形进度条_this.voiceTimeing ++;_this.voiceCircleDeg =(18/2.5) * _this.voiceTimeing;console.log(_this.voiceCircleDeg);var semicircle1 = _this.$refs.semicircle1;var semicircle2 = _this.$refs.semicircle2;var semicircle3 = _this.$refs.semicircle3;if(_this.voiceCircleDeg < 180) {semicircle2.style.transform = "rotate(" + _this.voiceCircleDeg + "deg)";} else {semicircle1.style.transform = "rotate(" + (_this.voiceCircleDeg-180) + "deg)";semicircle2.style.display = "none";semicircle3.style.display = "inline-block";}//录音最长时间为50秒if(_this.voiceTimeing > 50) {if(_this.voiceTimeingOut) {clearInterval(_this.voiceTimeingOut);_this.voiceTimeingOut = null;}_this.voiceEnd(e);// _this.$fui.toast("发送成功");} },1000);_this.voice_toast_text = "上滑取消";},cancel:function() {_this.$fui.toast("拒绝录音");}})},500);console.log(_this.timeOutVoice);}},onTouchmove:function(e) {var _this = this;if(_this.recording == true && _this.longClickVoice) {e.preventDefault();var currentPageY = e.changedTouches[0].pageY;console.log(currentPageY - _this.pageY);//上移预设取消录音if(currentPageY - _this.pageY < -100) {_this.cancelVoice = true; // _this.$fui.toast("显示如果松开，取消录音");_this.voice_toast_text = "松手取消";} else {// _this.$fui.toast("界面显示在录音");_this.cancelVoice = false; _this.voice_toast_text = "上滑取消";}}},onTouchend:function(e) {var _this = this;if(_this.voiceTimeing > 50) {_this.voiceTimeing = 0;return false;} else {if(_this.voiceTimeingOut) {clearInterval(_this.voiceTimeingOut);_this.voiceTimeingOut = null;}_this.voiceTimeing = 0;_this.voiceEnd(e);}},//录音结束voiceEnd:function(e) {var _this = this;if(_this.longClickVoice){e.preventDefault();_this.endTime = new Date().getTime();_this.voiceTime = parseInt((_this.endTime - _this.startTime)/1000);//取消录音if(_this.cancelVoice == true) {wx.stopRecord({success: function (res) {console.log(res);}});// _this.$fui.toast("取消录音");_this.cancelVoice = false;} else {//录音太短if(_this.voiceTime < 1) {wx.stopRecord({success: function (res) {console.log(res);}});_this.$fui.toast("录音太短");} else {//录音成功wx.stopRecord({success: function (res) {console.log(res);// _this.$fui.toast("录音成功");let localId = res.localId;//上传微信并下载到服务器_this.getVoice(localId);},fail:function(res) {console.log(res);_this.$fui.toast("录音失败");}});}} }_this.recording = false;if(_this.timeOutVoice) {clearTimeout(_this.timeOutVoice);_this.timeOutVoice = null;}_this.popup_status = 0;},//上传语音getVoice:function(localId) {var _this = this;wx.uploadVoice({localId: localId, // 需要上传的音频的本地ID，由stopRecord接口获得isShowProgressTips: 1, // 默认为1，显示进度提示success: function (res) {// _this.$fui.toast("录音上传成功");var serverId = res.serverId; // 返回音频的服务器端IDsessionStorage.setItem(serverId,localId);_this.pChatSocket.sendMessage(_this.voiceTime,"",serverId);},fail:function(res) {console.log(res);_this.$fui.toast("发送语音失败");}});},

（3）播放语音

onTap:function(msg_id,msg_rtype,msg_voice_url) {var _this = this;if(_this.playingMsgId != 0 && _this.playingMsgId == msg_id) {wx.pauseVoice({localId: _this.voiceLocalId, // 需要停止的音频的本地ID，由stopRecord接口获得success:function() {_this.playingMsgId = 0;_this.voiceLocalId = '';}});wx.stopVoice({localId: _this.voiceLocalId, // 需要停止的音频的本地ID，由stopRecord接口获得success:function() {_this.playingMsgId = 0;_this.voiceLocalId = '';}});} else {_this.playingMsgId = msg_id;if(msg_rtype == 2) {console.log(msg_voice_url);var localId = sessionStorage.getItem(msg_voice_url);console.log("log_localId:" + localId);if(!localId) {console.log("播放下载音乐");// //下载语音wx.downloadVoice({serverId: msg_voice_url, // 需要下载的音频的服务器端ID，由uploadVoice接口获得isShowProgressTips: 1, // 默认为1，显示进度提示success: function (res) {var localId = res.localId; // 返回音频的本地IDsessionStorage.setItem(msg_voice_url,localId);_this.voiceLocalId = localId;console.log("voiceLocalId:" + _this.voiceLocalId);// _this.$fui.toast("录音下载成功");//播放语音wx.playVoice({localId: localId, // 需要播放的音频的本地ID，由stopRecord接口获得success:function(res) {console.log(res);// _this.$fui.toast("录音播放成功");wx.onVoicePlayEnd({// 录音时间超过一分钟没有停止的时候会执行 complete 回调complete: function (res) {var localId = res.localId;_this.playingMsgId = 0;_this.voiceLocalId = '';}});},fail:function(res) {console.log(res);_this.$fui.toast("语音播放失败");}});},fail:function(res) {console.log(res);_this.$fui.toast("语音下载失败");// _this.downloadFail = true;var self_msgList = _this.msgList;for(var i = 0,l=self_msgList.length; i <l; i++) {if(self_msgList[i].id == msg_id){self_msgList[i].expireStatus = 1;i = self_msgList.length;}}_this.msgList = self_msgList;}});} else {console.log("播放历史");//播放语音_this.voiceLocalId = localId;console.log("voiceLocalId:" + _this.voiceLocalId);wx.playVoice({localId: localId, // 需要播放的音频的本地ID，由stopRecord接口获得success:function(res) {_this.playingMsgId = msg_id;console.log(res);_this.$fui.toast("录音播放成功");wx.onVoicePlayEnd({// 录音时间超过一分钟没有停止的时候会执行 complete 回调complete: function (res) {var localId = res.localId;_this.playingMsgId = 0;_this.voiceLocalId = '';}});},fail:function(res) {console.log(res);_this.$fui.toast("语音播放失败");}});}}}},

微信语音（录音，上传，下载，播放，停止）相关推荐

微信h5录音上传到自己的服务器,微信js-sdk 录音功能的示例代码
需求描述制作一个H5页面,打开之后可以录音,并将录音文件提交至后台微信录音最长时长为1min 代码如下 // isVoice: 0-未录音 1-录音中 2-录完音 // 点击录音/录音中按钮展示 ...
php 微信语音,微信语音的上传与下载功能实现详解
这篇文章主要介绍了微信语音上传下载功能实例代码,需要的朋友可以参考下假如现在有一个按钮按住说话下面就是调用微信jssdk的方法var recorder; var btnRecord = $( ...
微信sdk上传录音php,PHP端微信JS-SDK录音上传并转mp3和播放
Thinkphp5.0 的开发环境微信配置和使用 private function createNonceStr($length = 16) { $chars = "abcdefghijk ...
【微信开发】上传下载多媒体文件
最近一段时间,开始入手了微信开发.感觉挺有意思的,虽然目前还是遇到了许多解决不了的问题. 上传下载多媒体文件,这个作为高级接口的一部分功能,可能使用的人并不多,所以现在网上关于这个接口的使用教程很少. ...
java公众号图片上传_java微信公众号上传下载图片，springmvc demo
[实例简介] 微信上传下项目使用说明: 1.本项目适合学习springmvc学者(springmvc demo), url(http://localhost:8082/com.demo.weixin/ ...
微信js-sdk图片上传下载——java完整流程
最近做的一个项目刚好用到微信js-sdk的图片上传接口,在这里做一下总结. 在这里能知道使用js api的基本配置https://mp.weixin.qq.com/wiki?t=resource/re ...
微信多媒体文件下载java_.NET实现微信公共平台上传下载多媒体文件
举个例子,有人对着我们的公共微信号拍个照片发送过来,然后我们处理这个照片,比如进行ocr识别字(随后就会降到这个例子),或者人脸识别,或者拍照取证等,这些功能都是相当有用的.那么我们现在就要分析一下这 ...
【android】项目案例(三)之微信朋友圈上传,下载图片
功能: 1.相册列表 2.图片多选,单选 3.可以左右滑动 4.图片预览可以双击放大,捏拉放大 5.图图片缩放:支持双击缩放,手指捏拉缩放需要源码的留言或下载地址:https://github.c ...
录音、上传、播放音频微信小程序实践
文章目录录音.上传.播放音频微信小程序实践实践分析依赖接口录音上传播放 Page 事件参考录音.上传.播放音频微信小程序实践最近上线了一款智能外呼机器人产品,需要开发一款录音.上传. ...
上传声音微信小程序_SpringBoot开发案例之微信小程序录音上传
前言书接上回的<SpringBoot开发案例之微信小程序文件上传>,正常的业务流程是,口语测评需要学生通过前端微信小程序录入一段音频,通过调用第三方音频处理服务商进行评分,然后服务端对原 ...

微信语音（录音，上传，下载，播放，停止）

微信语音（录音，上传，下载，播放，停止）相关推荐

最新文章

热门文章