首先我们要做的就是长按录音功能,顺带做了个播放录音带进度条功能,效果图及代码如下:首先我们要做的效果图就是上图这样,下面就贴代码吧。wxml: <view catch:longpress=”handleRecordStart” catch:touchmove=”handleTouchMove” catch:touchend=”handleRecordStop” class=”img-content” hoverClass=”none” data-key=”cover” data-size=”1″> <image class=”icon-img” mode=”aspectFill” src=”###”></image> </view>录音播放<!– 录音 –><view class=”audio rel” wx:if=”{{audiolist.length>0}}”> <view class=”play abs” catchtap=’playAudio’ data-src=”{{audiolist}}”> <!– <image class=”abs play-img” mode=”aspectFill” src=”https://retail.xiaochengxucms.com/images/12/2018/10/T8A1maB3boAB3A8Sb8yTYBs1b0BmaA.png”></image> –> <view wx:if=”{{isPlayAudio}}”> <image class=”abs play-img” mode=”aspectFill” src=’/longbing_card/resource/images/stop.png’ /> </view> <view wx:else> <image class=”abs play-img” mode=”aspectFill” src=’/longbing_card/resource/images/play.png’ /> </view> </view> <view class=”name abs”>{{userName}}</view> <view class=”flex-time”> <view style=”font-size: 20rpx;color:#ccc”>{{showTime1}}</view> <view class=’slider’> <slider bindchange=’sliderChange’ activeColor=’red’ block-size=”12″ value='{{audioTime}}’ /> </view> <view style=”font-size: 20rpx;color:#ccc”>{{showTime2}}</view> </view></view>录音播放wxss:.play-img {width: 62rpx !important;height: 62rpx !important;top: 10rpx;left: 10rpx;}.audio {width: 100%;height: 112rpx;background: rgba(230, 67, 64, 0.49);border-radius: 8rpx;margin: 10rpx 0;}.play {width: 63rpx;height: 63rpx;top: 20rpx;left: 40rpx;}.name {font-size: 24rpx;font-family: PingFang SC;font-weight: 500;line-height: 42rpx;color: rgba(255, 255, 255, 1);top: 14rpx;left: 160rpx;}.flex-time {width: 70%;position: absolute;display: flex;align-items: center;justify-content: flex-start;left: 25%;bottom: -10rpx;}.slider{width: 60%;height: 100%;}.slider slider{width: 88%;margin-left: 8%;margin-right: 4%;}录音js:// 录音handleRecordStart: function(e) {this.setData({is_clock: true, //长按时应设置为true,为可发送状态startPoint: e.touches[0], //记录触摸点的坐标信息})//设置录音参数const options = {duration: 600000,sampleRate: 16000,numberOfChannels: 1,encodeBitRate: 48000,format: ‘mp3’}//开始录音recorderManager.start(options);wx.showLoading({icon: “none”,title: ‘正在录音’,})},handleRecordStop: function(e) {console.log(e)wx.hideLoading()recorderManager.stop() //结束录音//此时先判断是否需要发送录音if (this.data.is_clock == true) {var that = this//对停止录音进行监控recorderManager.onStop((res) => {//对录音时长进行判断,少于2s的不进行发送,并做出提示console.log(res)console.log(_xx_util2.default.getUrl(“upload”, “longbing_card”))if (res.duration < 2000) {wx.showToast({title: ‘录音时间太短,请长按录音’,icon: ‘none’,duration: 1000})} else {//进行语音发送const {tempFilePath} = res;wx.showLoading({title: ‘语音检索中’,})//上传录制的音频wx.uploadFile({url: _xx_util2.default.getUrl(“upload”, “longbing_card”),filePath: tempFilePath,name: ‘upfile’,success: function(event) {console.log(event)var datas = JSON.parse(event.data);console.log(datas)if (datas.errno == 0) {wx.hideLoading()if (datas.data) {console.log(that.data.audiolist)that.setData({audiolist: datas.data.path,audioPath: datas.data.img,time: res.duration})} else {wx.showToast({title: ‘上传格式错误’,icon: ‘none’,duration: 2000})}} else {wx.showToast({title: datas.msg,icon: ‘none’,duration: 2000})}}})}})}},handleTouchMove: function(e) {//计算距离,当滑动的垂直距离大于25时,则取消发送语音if (Math.abs(e.touches[e.touches.length – 1].clientY – this.data.startPoint.clientY) > 25) {this.setData({is_clock: false //设置为不发送语音})}},录音播放js:var innerAudioContext = wx.createInnerAudioContext()//很重要,写在page外面,作为全局变量data: {isPlayAudio: false,audioSeek: 0,audioDuration: 0,showTime1: ‘00:00’,showTime2: ‘00:00’,audioTime: 0},onshow: function() { console.log(“onshow”) this.Initialization(); this.loadaudio();},//初始化播放器,获取durationInitialization() { console.log(“初始化播放器”) var t = this; if (this.properties.audiolist.length != 0) { //设置src innerAudioContext.src = this.properties.audiolist; console.log(innerAudioContext.src) //运行一次 innerAudioContext.play(); innerAudioContext.pause(); innerAudioContext.onCanplay(() => { //初始化duration innerAudioContext.duration setTimeout(function() { //延时获取音频真正的duration var duration = innerAudioContext.duration; var min = parseInt(duration / 60); var sec = parseInt(duration % 60); if (min.toString().length == 1) { min = `0${min}`; } if (sec.toString().length == 1) { sec = `0${sec}`; } t.setData({ audioDuration: innerAudioContext.duration, showTime2: `${min}:${sec}` }); }, 1000) }) }},//拖动进度条事件sliderChange(e) { var that = this; innerAudioContext.src = this.properties.audiolist; //获取进度条百分比 var value = e.detail.value; this.setData({ audioTime: value }); var duration = this.data.audioDuration; //根据进度条百分比及歌曲总时间,计算拖动位置的时间 value = parseInt(value * duration / 100); //更改状态 this.setData({ audioSeek: value, isPlayAudio: true }); //调用seek方法跳转歌曲时间 innerAudioContext.seek(value); //播放歌曲 innerAudioContext.play();},//播放、暂停按钮playAudio() { console.log(“播放”) //获取播放状态和当前播放时间 var isPlayAudio = this.data.isPlayAudio; var seek = this.data.audioSeek; innerAudioContext.pause(); //更改播放状态 this.setData({ isPlayAudio: !isPlayAudio }) if (isPlayAudio) { //如果在播放则记录播放的时间seek,暂停 this.setData({ audioSeek: innerAudioContext.currentTime }); } else { //如果在暂停,获取播放时间并继续播放 innerAudioContext.src = this.properties.audiolist; console.log(innerAudioContext.src) if (innerAudioContext.duration != 0) { this.setData({ audioDuration: innerAudioContext.duration }); } //跳转到指定时间播放 innerAudioContext.seek(seek); innerAudioContext.play(); }},loadaudio() { var that = this; //设置一个计步器 this.data.durationIntval = setInterval(function() { //当歌曲在播放时执行 if (that.data.isPlayAudio == true) { //获取歌曲的播放时间,进度百分比 var seek = that.data.audioSeek; var duration = innerAudioContext.duration; var time = that.data.audioTime; console.log(seek, duration, time) time = parseInt(100 * seek / duration); console.log(time) //当歌曲在播放时,每隔一秒歌曲播放时间+1,并计算分钟数与秒数 var min = parseInt((seek) / 60); var sec = parseInt((seek) % 60); //填充字符串,使3:1这种呈现出 03:01 的样式 if (min.toString().length == 1) { min = `0${min}`; } if (sec.toString().length == 1) { sec = `0${sec}`; } var min1 = parseInt(duration / 60); var sec1 = parseInt(duration % 60); if (min1.toString().length == 1) { min1 = `0${min1}`; } if (sec1.toString().length == 1) { sec1 = `0${sec1}`; } //当进度条完成,停止播放,并重设播放时间和进度条 if (time >= 100) { innerAudioContext.stop(); that.setData({ audioSeek: 0, audioTime: 0, audioDuration: duration, isPlayAudio: false, showTime1: `00:00` }); return false; } console.log(`${min}:${sec}`, `${min1}:${sec1}`) //正常播放,更改进度信息,更改播放时间信息 that.setData({ audioSeek: seek + 1, audioTime: time, audioDuration: duration, showTime1: `${min}:${sec}`, showTime2: `${min1}:${sec1}` }); } }, 1000);},onUnload: function() { //卸载页面,清除计步器 clearInterval(this.data.durationIntval);}
微信小程序录音功能实现
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序录音功能实现
相关推荐
微商白云区E企盈小程序靠直播卖货的技巧是什么? – E企盈小程序
小程序input禁止输入空沙县E企盈小程序格
小程序中disabl镇沅E企盈小程序ed为false和true
小程序——自定义数据分朔州E企盈小程序析
微信小程序支付接口对接总津市市E企盈小程序结
微信小程序:webview嵌套H5实现微信支付功能解决方白云区E企盈小程序案及填坑
小程序广西E企盈小程序wx.authorize之scope.userLocation授权错误
微信小程朔州E企盈小程序序点击图片放大预览
微信小程察哈尔右翼后旗E企盈小程序序录音实现上传和播放录音
使input文本框不可云龙区E企盈小程序编辑的3种方法
微信小程序——微信小山海关区E企盈小程序程序后台自定义分析,数据准确性分析
微信米泉市E企盈小程序小程序统计
最新评论
不错的小程序案例
优秀的团队,不错的服务!
讲的很好
主播长的帅气
好系统好服务
优秀的团队
好服务,值得信赖
不错的服务