VUE中使用Wavesurfer.js实现可视化音频波形功能

<template>
  <div style="padding: 30px">
    <div ref="waveform_Ref" style="cursor: pointer"></div>
    <!-- 时间信息 -->
    <div class="time-info">
      <span
        >当前时间:
        <span style="color: #72df90">{{ formatTime(currentTime) }}</span>
      </span>
      <span>总时长: {{ 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, // 当前播放时间
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.wavesurfer = WaveSurfer.create({
        // 波形图的容器
        container: this.$refs.waveform_Ref,
        // 已播放波形的颜色
        progressColor: "#13ce66",
        // 未播放波形的颜色
        // waveColor: "lightgrey",
        // 波形图的高度，单位为px
        // height: 10,
        // 是否显示滚动条，默认为false
        scrollParent: true,
        // 波形的振幅（高度），默认为1
        // barHeight: 0.8,
        // 波形条的圆角
        // barRadius: 2,
        // 波形条的宽度
        // barWidth: 1,
        // 波形条间的间距
        // barGap: 3
        // 播放进度光标条的颜色
        cursorColor: "red",
        // 播放进度光标条的宽度，默认为1
        // cursorWidth: 10,
        // 播放进度颜色
        // progressColor: "blue",
        //  波形容器的背景颜色
        // backgroundColor: "yellow",
        // 音频的播放速度
        // audioRate: "1",
        // （与区域插件一起使用）启用所选区域的循环
        // loopSelection:false
      });
      this.wavesurfer.on("error", (error) => {
        console.error("音频加载失败:", error);
        this.$message({
          type: "error",
          message: "音频加载失败，请检查文件路径或网络连接",
        });
      });
      this.wavesurfer.load(this.audioSrc);
      // 监听结束事件
      this.wavesurfer.on("finish", () => {
        this.playing = false;
      });
      // 监听时间更新事件
      this.wavesurfer.on("audioprocess", (time) => {
        this.currentTime = time;
      });
      // 监听暂停事件
      this.wavesurfer.on("pause", () => {
        this.playing = false;
      });
      // 监听音频加载完成事件
      this.wavesurfer.on("ready", () => {
        this.duration = this.wavesurfer.getDuration();
      });
    });
  },
  methods: {
    // 格式化时间（秒 -> 分:秒）
    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() {
    // 销毁 Wavesurfer 实例
    if (this.wavesurfer) {
      this.wavesurfer.destroy();
    }
  },
};
</script>
<style scoped>
.time-info {
  font-size: 18px;
  color: #666;
}
</style>

       <WaveSurferPlayer :audioSrc="audioUrl" />