<template>
  <div style="padding: 30px">
    <div ref="waveform_Ref" style="cursor: pointer"></div>
    <!-- 時(shí)間信息 -->
    <div class="time-info">
      <span
        >當(dāng)前時(shí)間:
        <span style="color: #72df90">{{ formatTime(currentTime) }}</span>
      </span>
      <span>總時(shí)長(zhǎng): {{ formatTime(duration) }}</span>
    </div>
    <div style="padding: 30px; width: 120px; margin: auto">
      <el-button
        type="success"
        icon="el-icon-video-play"
        @click="playMusic"
        circle
        v-if="!playing"
      >
      </el-button
      ><el-button
        v-if="playing"
        type="danger"
        icon="el-icon-video-pause"
        circle
        @click="playMusic"
      >
      </el-button>
    </div>
  </div>
</template>

<script>
import WaveSurfer from "wavesurfer.js";

export default {
  name: "WaveSurferPlayer",
  props: {
    audioSrc: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      wavesurfer: null,
      playing: false,
      duration: 0,
      currentTime: 0, // 當(dāng)前播放時(shí)間
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.wavesurfer = WaveSurfer.create({
        // 波形圖的容器
        container: this.$refs.waveform_Ref,
        // 已播放波形的顏色
        progressColor: "#13ce66",
        // 未播放波形的顏色
        // waveColor: "lightgrey",
        // 波形圖的高度，單位為px
        // height: 10,
        // 是否顯示滾動(dòng)條，默認(rèn)為false
        scrollParent: true,
        // 波形的振幅（高度），默認(rèn)為1
        // barHeight: 0.8,
        // 波形條的圓角
        // barRadius: 2,
        // 波形條的寬度
        // barWidth: 1,
        // 波形條間的間距
        // barGap: 3
        // 播放進(jìn)度光標(biāo)條的顏色
        cursorColor: "red",
        // 播放進(jìn)度光標(biāo)條的寬度，默認(rèn)為1
        // cursorWidth: 10,
        // 播放進(jìn)度顏色
        // progressColor: "blue",
        //  波形容器的背景顏色
        // backgroundColor: "yellow",
        // 音頻的播放速度
        // audioRate: "1",
        // （與區(qū)域插件一起使用）啟用所選區(qū)域的循環(huán)
        // loopSelection:false
      });
      this.wavesurfer.on("error", (error) => {
        console.error("音頻加載失敗:", error);
        this.$message({
          type: "error",
          message: "音頻加載失敗，請(qǐng)檢查文件路徑或網(wǎng)絡(luò)連接",
        });
      });
      this.wavesurfer.load(this.audioSrc);
      // 監(jiān)聽(tīng)結(jié)束事件
      this.wavesurfer.on("finish", () => {
        this.playing = false;
      });
      // 監(jiān)聽(tīng)時(shí)間更新事件
      this.wavesurfer.on("audioprocess", (time) => {
        this.currentTime = time;
      });
      // 監(jiān)聽(tīng)暫停事件
      this.wavesurfer.on("pause", () => {
        this.playing = false;
      });
      // 監(jiān)聽(tīng)音頻加載完成事件
      this.wavesurfer.on("ready", () => {
        this.duration = this.wavesurfer.getDuration();
      });
    });
  },
  methods: {
    // 格式化時(shí)間（秒 -> 分:秒）
    formatTime(time) {
      const minutes = Math.floor(time / 60);
      const seconds = Math.floor(time % 60);
      return `${minutes}:${seconds.toString().padStart(2, "0")}`;
    },
    playMusic() {
      this.wavesurfer.playPause.bind(this.wavesurfer)();
      this.playing = !this.playing;
    },
  },
  beforeDestroy() {
    // 銷(xiāo)毀 Wavesurfer 實(shí)例
    if (this.wavesurfer) {
      this.wavesurfer.destroy();
    }
  },
};
</script>
<style scoped>
.time-info {
  font-size: 18px;
  color: #666;
}
</style>

       <WaveSurferPlayer :audioSrc="audioUrl" />