zoukankan      html  css  js  c++  java
  • 小程序中实现录音功能(按住录制上滑取消)

    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(); },
  • 相关阅读:
    android OnActivityResult()的调用时机问题
    把汉化的eclipse还原为英语版的小绝招
    sunPKCS11加载动态库(转)
    android 源码分析
    android notification应用
    期待快点过去
    Linux 的Root 帐号
    C#之CMD
    更新Citrix Merchandising Server 2.2的默认Updater
    CRL的验证
  • 原文地址:https://www.cnblogs.com/fairy62/p/12612176.html
Copyright © 2011-2022 走看看