tnbapp/src/components/card/audio-card.vue

<template>
  <div style="width: 640px">
    <v-card
      color="white"
    >
      <v-card-title>
        <!--        <v-avatar>
          <img
            :src="item.avatarUrl"
            alt="social"
          >
        </v-avatar>-->
        <span class="text-body-1 font-weight-light">{{ item.userId }}</span>
        <span class="text-body-1 font-weight-light">{{ item.pubDate }}</span>
      </v-card-title>

      <v-card-text class-name="text-h5 font-weight-bold">
        <span v-html="item.title" />
        <div>
          <audio-player
            ref="audioPlayer"
            :show-prev-button="false"
            :show-next-button="false"
            :show-playback-rate="false"
            :audio-list="audioList.map(elm => elm.url)"
            :before-play="handleBeforePlay"
            theme-color="#87CEFA"
          />
        </div>
      </v-card-text>
      <v-icon
        small
        left
      >
        mdi-twitter
      </v-icon>
    </v-card>
  </div>
</template>

<script>
export default {
  name: 'AudioCard',
  props: {
    item: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    return {
      currentAudioName: '',
      audioList: []
    }
  },
  created() {
    this.audioList = [
      { name: this.item.title, url: this.item.audioUrl }
    ]
  },
  methods: {
    // 播放前做的事
    handleBeforePlay(next) {
      // 这里可以做一些事情...
      this.currentAudioName = this.audioList[this.$refs.audioPlayer.currentPlayIndex].name

      next() // 开始播放
    },
    handlePlaySpecify() {
      this.$refs.audioPlayer.currentPlayIndex = 1
      this.$nextTick(() => {
        this.$refs.audioPlayer.play()
        this.title = this.audioList[
          this.$refs.audioPlayer.currentPlayIndex
        ].name
      })
    }
  }
}
</script>

<style>
</style>