如何使用vue3+uni-app封装音乐播放插件

let AUDIO = ''
export const initAudio = function (url) {
  AUDIO = uni.createInnerAudioContext()
  AUDIO.src = url

  return AUDIO
}

 app.config.globalProperties.initAudio = initAudio    // main.ts/js 文件中

<view class="audio-play">
    <view class="audio-background"></view>
    <img class="controls" @click="playAudio" :src="data.isPlay ? data.pauseIcon : data.playIcon" alt="" />
    <view class="progress-container">
      <view class="playTime">{{ formatTime(data.playTime) }}</view>
      <!-- value的总数是100  通过value控制进度条进度 直到最后19/19*100就是进度条满了 强行进度条总数规定成100 -->
      <slider class="progress" block-size="10" block-color="#69bfbe" activeColor="#ffffff" backgroundColor="#119b9a" :value="(data.playTime / data.trueTime) * 100" @change="sliderChange" />
      <view class="totalTime">{{ data.totalTime }}</view>
    </view>
  </view>

import { reactive, onMounted, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance() as any

let a = proxy.initAudio('音频地址')

// 创建音频
const createAudio = function () {
  a.autoplay = false
  a.onCanplay(() => {
    let intervalID = setInterval(function () {
      if (a.duration !== 0) {
        console.log(a.duration, '测试')
        // 设置总时长
        data.totalTime = formatTime(a.duration)
        data.trueTime = a.duration
        clearInterval(intervalID)
      }
    }, 500)
  })
}

// 格式化时间 ---- (00:00的格式)
const formatTime = function (data: any) {
  let minute = ''
  let second = ''

  minute = `${Math.floor(data / 60)}`
  second = `${Math.floor(data % 60)}`

  if (minute.toString().length === 1) minute = `0${minute}`
  if (second.toString().length === 1) second = `0${second}`
  return `${minute}:${second}`
}

// 播放和暂停
const playAudio = function () {
  if (data.isPlay) {
    if (data.trueTime > 0) {
      console.log('暂停')
      clearInterval(data.timeupdata)
      a.pause()
      data.isPlay = !data.isPlay
    }
  } else {
    console.log('播放')
    data.timeupdata = setInterval(() => {
      // 播放时长
      data.playTime += 1
      // 播放时长超过总时长（秒 ）
      if (data.playTime >= data.trueTime) {
        // 不循环播放
        a.stop()
        data.isPlay = false
        data.playTime = 0
        clearInterval(data.timeupdata)

        // 循环播放
        // this.isPlay = false
        // this.playTime = 0
        // clearInterval(this.timeupdata)
        // this.playAudio()
      }
    }, 1000)
    a.play()
    data.isPlay = !data.isPlay
  }
}

<slider class="progress" block-size="10" block-color="#ffb218" activeColor="#ffffff" backgroundColor="#d27e4a" :value="(data.playTime / data.trueTime) * 100" @change="sliderChange" />

// 控制进度条
const sliderChange = function (e: any) {
  console.log('value 发生变化：' + e.detail.value)
  //   直到进度条到达100的时候才能获得总时长
  const second = (e.detail.value / 100) * data.trueTime
  data.playTime = second
  // 跳转到某一秒
  a.seek(second)
}