根据uniapp调整工程结构

components/AiVideo.vue

@@ -0,0 +1,173 @@
+<template>
+  <view class="imt-audio">
+    <view class="audio-wrapper">
+      <view class="audio-number">{{ format(current) }}</view>
+      <slider class="audio-slider" :activeColor="color" block-size="16" :value="current" :max="duration || 10"
+              @changing="seek=true,current=$event.detail.value" @change="audio.seek($event.detail.value)"></slider>
+      <view class="audio-number">{{ format(duration) }}</view>
+    </view>
+    <view class="audio-control-wrapper" :style="{color}">
+      <image
+          class="audio-control audio-control-switch"
+          @click="audio.paused?play():audio.pause()"
+          :src="`${$cdn}video/${paused ? 'play-icon' : 'stop-img'}.png`"/>
+      <p>{{ paused ? '点击播放' : '点击停止播放' }}</p>
+    </view>
+  </view>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      audio: uni.createInnerAudioContext(),
+      current: 0, //当前进度(s)
+      duration: 0, //总时长(s)
+      paused: true, //是否处于暂停状态
+      loading: false, //是否处于读取状态
+      seek: false,
+    }
+  },
+  props: {
+    src: String, //音频链接
+    autoplay: Boolean, //是否自动播放
+    continue: Boolean, //播放完成后是否继续播放下一首，需定义@next事件
+    control: {
+      type: Boolean,
+      default: true
+    }, //是否需要上一曲/下一曲按钮
+    color: {
+      type: String,
+      default: '#007BFF'
+    } //主色调
+  },
+  methods: {
+    //返回prev事件
+    prev() {
+      this.$emit('prev')
+    },
+    //返回next事件
+    next() {
+      this.$emit('next')
+    },
+    //格式化时长
+    format(num) {
+      return '0'.repeat(2 - String(Math.floor(num / 60)).length) + Math.floor(num / 60) + ':' + '0'.repeat(2 - String(Math.floor(num % 60)).length) + Math.floor(num % 60)
+    },
+    //点击播放按钮
+    play() {
+      this.audio.play()
+      this.loading = true
+    }
+  },
+  created() {
+    if (this.src) {
+      this.audio.src = this.src
+      this.autoplay && this.play()
+    }
+    this.audio.obeyMuteSwitch = false
+    //音频进度更新事件
+    this.audio.onTimeUpdate(() => {
+      if (!this.seek) {
+        this.current = this.audio.currentTime
+      }
+      if (!this.duration) {
+        this.duration = this.audio.duration
+      }
+    })
+    //音频播放事件
+    this.audio.onPlay(() => {
+      this.paused = false
+      this.loading = false
+    })
+    //音频暂停事件
+    this.audio.onPause(() => {
+      this.paused = true
+    })
+    //音频结束事件
+    this.audio.onEnded(() => {
+      if (this.continue) {
+        this.next()
+      } else {
+        this.paused = true
+        this.current = 0
+      }
+    })
+    //音频完成更改进度事件
+    this.audio.onSeeked(() => {
+      this.seek = false
+    })
+  },
+  beforeDestroy() {
+    this.audio.destroy()
+  },
+  watch: {
+    src(src, old) {
+      this.audio.src = src
+      this.current = 0
+      this.duration = 0
+      if (old || this.autoplay) {
+        this.play()
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.imt-audio {
+  background: #fff;
+  border-radius: 20px;
+}
+
+.audio-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.audio-number {
+  width: 120px;
+  font-size: 24px;
+  line-height: 1;
+  color: #999999;
+  text-align: center;
+}
+
+.audio-slider {
+  flex: 1;
+  margin: 0;
+}
+
+.audio-control-wrapper {
+  margin-top: 40px;
+  text-align: center;
+}
+
+.audio-control-wrapper p {
+  color: #999999;
+  font-size: 26px;
+}
+
+.audio-control-wrapper image {
+  width: 128px;
+  height: 128px;
+}
+
+.audio-control {
+  font-size: 32px;
+  line-height: 1;
+  border-radius: 50%;
+}
+
+.audio-control-switch {
+  font-size: 40px;
+  margin: 0 100px;
+}
+
+@keyframes loading {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>