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开发源码
    FlexViewer框架地图控件三问
    dll转移转载
    共享quotedprintable解码(C#)转载
    开源OCR引擎Tesseract
    Qt Features for Hybrid Web/Native Application Development转载
    利用QT进行web与本地混合应用开发转载
    js 中 document.createEvent的用法转载
    用Python多线程抓取并验证代理(转)
    API Hook完全手册
  • 原文地址:https://www.cnblogs.com/fairy62/p/12612176.html
Copyright © 2011-2022 走看看