码迷,mamicode.com
首页 > 微信 > 详细

小程序中实现录音功能(按住录制上滑取消)

时间:2020-04-01 14:31:33      阅读:324      评论:0      收藏:0      [点我收藏+]

标签:开启   rtp   tool   class   manage   cat   int   else   开始   

1.template文本,提供一个按住录制的按钮

<view class="tip-touchmove" wx:if="{{showCancelType==2}}">
上滑取消
</view>
<view class="tip-touchmove" wx:if="{{showCancelType==3}}">
松开手指,取消录音
</view>
<view class="voice-tool" catch:touchend="onTouchEnd" bind:touchstart="onTouchStart"
                  bind:longpress="onLongpress" catch:touchmove="onTouchMove">
                <view class="tool-text">按住说话录音</view>
            </view>

2.script文本,

recordInit---录音权限是否开启
duration---录音的有效时长
onTouchStart(e) {
                this.$apply();
                if (!this.recordInit) {
                    this.judgeRecord();
                    return false;
                }
            },
            onLongpress(e) {
                if (!this.recordInit) {
                    return false;
                }
          //在这里处理录音开始之后页面上的显示效果
this.$apply(); const RecorderManager = wx.getRecorderManager(); RecorderManager.onStart((res) => { console.log(‘开始录音了‘) this.recording = true; this.startTime = new Date().getTime(); this.vInterval = setInterval(()=>{ let duration = (new Date().getTime() - this.startTime)/1000;//秒 this.duration = parseInt(duration) + ‘′‘ + parseInt((parseFloat(duration) - parseInt(duration)) * 100) + "″"; this.widthPersent = ((duration/60)*100) + ‘%‘; this.$apply(); }, 60); this.$apply(); }) RecorderManager.onStop((res) => { console.log(‘结束录音了‘, res); //这里处理录音结束之后的显示效果this.$apply(); if (this.showCancelType == 3) { this.duration= ‘00′00″‘; this.startTime= ‘‘; this.widthPersent= ‘0%‘; this.showCancelType = 1; clearInterval(this.vInterval) this.$apply(); }else { this.tempFilePath = res.tempFilePath; this.recording = false; clearInterval(this.vInterval) this.$apply(); let duration = Math.ceil(res.duration/1000); //这里进行录音结束之后的下一步操作this.showCancelType = 1; this.$apply(); } }); RecorderManager.start({ duration: 60000, format: ‘mp3‘ }); this.startPageY = e.touches[0].clientY; this.showCancelType = 2; this.$apply(); }, onTouchMove(e) { this.recording = true; if (this.startPageY - e.touches[0].clientY > 50) { //松开手指 this.showCancelType = 3; } else { //上划取消 this.showCancelType = 2; } this.$apply(); console.log(‘onTouchMove‘); }, onTouchEnd() { console.log(‘onTouchEnd‘); const RecorderManager = wx.getRecorderManager(); RecorderManager.stop(); },

 

小程序中实现录音功能(按住录制上滑取消)

标签:开启   rtp   tool   class   manage   cat   int   else   开始   

原文地址:https://www.cnblogs.com/fairy62/p/12612176.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!