微信公众号H5，录音功能

功能：
按住录音，移开取消，调用的微信录音api，因手机端H5长按图片文字会放大或者选中，得禁止

效果图：

html

  <van-popup
      v-model="vanPopupShow"
      round
      position="bottom"
      :style="{ height: '40%' }"
    >
      <div class="bottom_popup">
        <div
          v-if="isTitle"
          class="no-select bottom_popup_p"
          :class="newTitle == '松手取消发送' ? 'isRed' : ''"
          style="height: 20%; width: 100%"
        >
          {{ newTitle }}
        </div>
        <div
          v-else
          class="no-select bottom_popup_p"
          style="height: 20%; width: 100%"
        >
          {{ recordingTime }}s
        </div>
        <!-- <div class="bottom_popup_img">
          <img @touchstart.prevent="startRecording" class="no-select" style="width:50px" src="../../../assets/img/叉.png" alt="">
        </div> -->
        <div
          ref="touchElement"
          :class="{ pressed: isPressed }"
          class="img-select"
          @touchstart.prevent="startRecording"
          @touchend="stopRecording"
          @touchmove="cancelRecording"
        >
          <div v-if="!isTitle" class="siri-like-wave"></div>
        </div>
      </div>
    </van-popup>

js

    startRecording(event) {
      this.isTitle = false;
      this.isPressed = true;
      // 阻止默认的触摸开始事件
      event.preventDefault();
      this.recording = true;
      this.startTime = Date.now();
      this.updateRecordingTime();
      // 获取触摸元素的位置信息
      const rect = this.$refs.touchElement.getBoundingClientRect();
      this.elementBounds = {
        top: rect.top,
        right: rect.right,
        bottom: rect.bottom,
        left: rect.left,
      };

      // 判断初始触摸位置是否在元素内部
      this.isInside = this.isInsideElement(event.touches[0]);
      const _this = this;
      wx.ready(function () {
        wx.startRecord({
          success: () => {
            _this.isrecreding = true;
            if (_this.timer) {
              clearInterval(_this.timer);
              _this.timer = null;
            }
            // 开始录音时启动计时器
            _this.timer = setInterval(() => {
              _this.time++;
            }, 1000);
          },
          fail: (res) => {
            _this.$toast(res);
            console.error(res);
          },
        });
      });
    },
    stopRecording() {
      if (this.newTitle == "松手取消发送") {
        this.recording = false;
        this.isPressed = false;
        // 处理录音结束逻辑
        this.recordingTime = 0;
        this.isTitle = true;
        this.newTitle = "长按开始录音";
        return;
      }
      if (this.recordingTime < 5) {
        this.newTitle = "录音时间太短";
        this.recording = false;
        this.isPressed = false;
        // 处理录音结束逻辑
        this.recordingTime = 0;
        this.isTitle = true;
        return;
      }
      this.recording = false;
      this.isPressed = false;
      // 处理录音结束逻辑
      this.recordingTime = 0;
      this.isTitle = true;
      this.newTitle = "长按开始录音";
      this.vanPopupShow = false;
      wx.stopRecord({
        success: (res) => {
          // this.$toast(res.localId);
          this.localId = res.localId;
          this.uploadRecording();
        },
        fail: (res) => {
          console.error(res);
        },
      });
    },
    uploadRecording() {
      wx.uploadVoice({
        localId: this.localId,
        success: (res) => {
          // this.$toast(res.serverId);
          this.serverId = res.serverId;
          getDownloadVoice({
            mediaId: this.serverId,
          }).then((res) => {
            this.$store.commit("setAudioConfig", {
              fileUrl: res.data,
              isWXAudio: true,
              localId: this.localId,
              // dataBase64Url: 'https://buudoo-tts-demo.oss-cn-beijing.aliyuncs.com/f2b07711-1dcb-4c6e-a94f-0c03d8101674_tongsheng.wav',
            });
            // 停止录音时清除计时器
            clearInterval(this.timer);
            this.timer = null;
            this.time = 0;
            this.$router.push({
              path: "/video/list",
              query: {
                outerTab: 1,
                puuid: this.$route.query.puuid,
              },
            });
          });
        },
        fail: (res) => {
          console.error(res);
        },
      });
    },
    cancelRecording(event) {
      // 判断移动位置是否在元素外部
      // const isOutside = !this.isInsideElement(event.touches[0]);

      // if (this.isInside && isOutside) {
      //   // 在元素内部开始移动，后来移动到外部
      //   // 执行相应的操作
      //   this.isTitle = true;
      //   this.newTitle = "松手取消发送";

      //   // 可以在这里执行你想要的操作
      // } else {
      //   this.isTitle = false;
      //   this.newTitle = "长按开始录音";
      // }

      // const touch = event.touches[0];

      // const deltaY = touch.pageY - touch.clientY;

      // if (deltaY < -this.cancelRecordingThreshold) {
      //   // 取消录音
      //   this.recording = false;
      //   this.recordingTime = 0;
      //   // 处理取消录音逻辑
      // }
    },
    isInsideElement(touch) {
      // 判断触摸点是否在元素内部
      return (
        touch.clientX >= this.elementBounds.left &&
        touch.clientX <= this.elementBounds.right &&
        touch.clientY >= this.elementBounds.top &&
        touch.clientY <= this.elementBounds.bottom
      );
    },
    updateRecordingTime() {
      if (this.recording) {
        const currentTime = Math.floor((Date.now() - this.startTime) / 1000);
        this.recordingTime = currentTime;
        setTimeout(() => {
          this.updateRecordingTime();
        }, 1000);
      }
    },```



css:

```javascript
.siri-like-wave {
  width: 100px;
  height: 100px;
  border: 3px solid #3498db;
  border-top: none;
  border-right: none;
  animation: rotate 2s infinite linear;
  z-index: 1;
  position: absolute;
  top: 0%;
  // left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}