<template>
  <div class="hello">
    <div class="player">
      {{ currentAudioName || audioList[0].name }}
      <audio-player
        ref="audioPlayer"
        :show-prev-button="false"
        :show-next-button="false"
        :audio-list="audioList.map((elm) => elm.url)"
        :before-play="handleBeforePlay"
        theme-color="#ff2929"
        @playing="playing"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      wavesurfer: {},
      currentAudioName: "",
      audioList: [
        {
          name: "音频1",
          url: "https://static.quhouse.com/audio/d7879fbcdfcc436189ce79e643e0aeb8.mp3",
        },
        // {
        //   name: '音频2',
        //   url: 'https://www.0dutv.com/upload/dance/20200316/C719452E3C7834080007662021EA968E.mp3'
        // }
      ],
    };
  },
  methods: {
    handleBeforePlay(next) {
      // 这里可以做一些事情...
      this.currentAudioName =
        this.audioList[this.$refs.audioPlayer.currentPlayIndex].name;
      console.log("我要开始播放了");

      next(); // 开始播放
    },
    playing(e) {
      console.log("我播放中", this.$refs.audioPlayer.currentTime);
    },
  },
  mounted() {},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.player{
  width: 30%;
  margin: 20px auto;
}
</style>
