keanu-weblite/src/components/messages/AudioPlayer.vue

<template>
  <div class="audio-player d-flex flex-row align-center">
    <v-progress-circular v-if="info.loading" @click.stop="pause" :value="info.loadPercent" size="24" width="2" style="margin:6px"></v-progress-circular>
    <v-btn v-else-if="info.playing" id="btn-pause" @click.stop="pause" icon><v-icon size="20">pause</v-icon></v-btn>
    <v-btn v-else id="btn-play" @click.stop="play" icon><v-icon size="20">play_arrow</v-icon></v-btn>
    <div class="play-time">
      {{ currentTime }} / {{ totalTime }}
    </div>
    <v-slider @change="seeked" :disabled="!info.url" color="currentColor" track-color="#cccccc" class="play-progress" :value="info.playPercent" min="0"
      max="100" />
  </div>
</template>

<script>
import util from "../../plugins/utils";

export default {
  props: {
    event: {
      type: Object,
      default: function () {
        return null;
      },
    },
    timelineSet: {
      type: Object,
      default: function () {
        return null;
      },
    },
  },
  data() {
    return {
      info: this.install(),
    };
  },
  beforeDestroy() {
    this.$audioPlayer.removeListener(this._uid);
  },
  computed: {
    currentTime() {
      return util.formatDuration(this.info.currentTime);
    },
    totalTime() {
      return util.formatDuration(this.info.duration);
    },
  },
  methods: {
    install() {
      return this.$audioPlayer.addListener(this._uid, this.event);
    },
    play() {
      this.$audioPlayer.play(this.event, this.timelineSet);
    },
    pause() {
      this.$audioPlayer.pause(this.event);
    },
    onPlaybackStart(item) {
      if (item != this.src && this.info.playing) {
        this.pause();
      }
    },
    seeked(percent) {
      this.$audioPlayer.seek(this.event, percent);
    }
  },
};
</script>

<style lang="scss">
@import "@/assets/css/chat.scss";
</style>