JS实现一个微信录音功能过程示例详解

|__im-record
    |__Record.vue
    |__use-record-layout.js
    |__use-record-interact.js

<script setup>
import { useNamespace } from "@/use-namespace";
const ns = useNamespace('chat')
</script>
<template>
  <header :class="ns.b('header')"></header>
  <main :class="ns.b('main')">
    <section :class="[ns.b('record'), ns.w('record', 'toast')]">
      <div :class="ns.w('record', 'speak')"></div>
      <div :class="ns.w('record', 'pause')"></div>
    </section>
  </main>
  <footer :class="ns.w('button', 'wrap')">
    <button :class="ns.b('button')">
      <span>
        按住 说话
      </span>
    </button>
  </footer>
</template>

  const recordStyle = {
    default: { }, // 默认样式/确定发送录音
    recording: { }, // 录音中
    pause: { }, // 暂停录音
    cancel: { } // 取消录音
  }
  const init = () => {
    initEvent()
    initStyle()
  }
  const initStyle = () => {
    recordStyle.default.is = true
  }
  const initEvent = () => {
    el.addEventListener('touchstart', handleTouchstart)
    el.addEventListener('touchmove', handleTouchmove)
    el.addEventListener('touchend', handleTouchend)
  }
  const axis = {
    posStart: 0, // 初始化起点坐标
    posMove: 0 // 初始化滑动坐标
  }
  const handleTouchstart = (event) => {
    event.preventDefault()
    axis.posStart = event.touches[0].pageY
    recordStyle.recording.is = true
  }
  const handleTouchmove = (event) => {
    event.preventDefault()
    axis.posMove = event.targetTouches[0].pageY
    const diffMove = axis.posMove - axis.posStart
    if (diffMove > DEFAULT_AXIS) {
      recordStyle.recording.is = true
    }
  }
  const handleTouchend = (event) => {
    event.preventDefault()
    recordStyle.default.is = true
  }
  init()

const wx = 'wx'
const useRecordInteract = () => {
  const isAuth = localStorage.getItem('allowWxRecord')
  // 获取录音权限
  const authRecord = () => {
    if (!isAuth) {
      wx.startRecord()
      return
    }
    return isAuth
  }
  // 停止录音
  const stopRecord = () => {}
  // 上传录音
  const uploadRecord = () => {}
}

const interact = useRecordInteract()
const recordStyle = {
    default: {
      _is: false,
      get is() {
        return this._is
      },
      set is(value) {
        this._is = value
        if (value) {
          this.recording.is = false
          this.pause.is = false
          this.cancel.is = false
          interact.uploadRecord()
        }
      }
    },
    //...
}