dvcp_v2_wxcp_app/components/AiVideo.vue

<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>