【wavesurfer.js实战范例】多区域音频标注（含区域实时切换显示）

通过多选框，实现多区域显示的实时切换，实现原理：

1. 每次切换时先清除所有区域
2. 对选中区域进行重绘

<template>
  <div style="padding: 30px">
    <el-row type="flex" justify="center">
      <el-checkbox-group v-model="showList" @change="showListChange">
        <el-checkbox
          v-for="(regionInfo, regionKey) in regionDic"
          :label="regionKey"
          :key="'region' + regionKey"
        >
          <div class="colorTag" :style="{ background: regionInfo.color }"></div>
          {{ regionInfo.label }}</el-checkbox
        >
      </el-checkbox-group>
    </el-row>
    <div class="waveBox" ref="wave_Ref"></div>
  </div>
</template>

<script>
import WaveSurfer from "wavesurfer.js";
// 导入插件--区域
import RegionsPlugin from "wavesurfer.js/dist/plugin/wavesurfer.regions.min.js";
// 导入插件--指针轴
import CursorPlugin from "wavesurfer.js/dist/plugin/wavesurfer.cursor.js";

export default {
  data() {
    return {
      showList: ["1", "2", "3", "4", "5"],
      wavesurfer: null,
      regionDic: {
        1: {
          label: "前奏",
          color: "rgba(255, 255, 0, 0.5)",
          dataMark: "preludeList",
        },
        2: {
          label: "男声",
          color: "rgba(0, 0, 255, 0.5)",
          dataMark: "boyVoiceList",
        },
        3: {
          label: "女声",
          color: "rgba(255, 0, 0, 0.5)",
          dataMark: "girlVoiceList",
        },
        4: {
          label: "男/女合唱",
          color: "rgba(0, 255, 255, 0.5)",
          dataMark: "chorusList",
        },
        5: {
          label: "间奏",
          color: "rgba(255, 0, 255, 0.5)",
          dataMark: "interludeList",
        },
      },

      boyVoiceList: [
        {
          start: 14,
          end: 26,
        },
        {
          start: 59,
          end: 64,
        },
        {
          start: 109,
          end: 134,
        },
        {
          start: 148,
          end: 160,
        },
      ],

      girlVoiceList: [
        {
          start: 27,
          end: 39,
        },
        {
          start: 52,
          end: 58,
        },
      ],

      preludeList: [
        {
          start: 0,
          end: 14,
        },
      ],

      // 男女合唱
      chorusList: [
        {
          start: 40,
          end: 52,
        },
        {
          start: 65,
          end: 71,
        },
        {
          start: 97,
          end: 109,
        },
        {
          start: 135,
          end: 147,
        },
        {
          start: 161,
          end: 173,
        },
      ],
      // 间奏
      interludeList: [
        {
          start: 72,
          end: 96,
        },
      ],
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.wavesurfer = WaveSurfer.create({
        container: this.$refs.wave_Ref,
        plugins: [
          // 插件--区域的配置
          RegionsPlugin.create({}),

          // 插件--指针轴的配置
          CursorPlugin.create({
            showTime: true,
            opacity: 1,
            customShowTimeStyle: {
              "background-color": "#000",
              color: "#fff",
              padding: "2px",
              "font-size": "10px",
            },
          }),
        ],
      });
      this.wavesurfer.load(require("./《祝福你》群星_粤语.mp3"));
      // 自动播放
      let that = this;
      this.wavesurfer.on("ready", function () {
        that.wavesurfer.play();
      });
      this.drawRegion();
    });
  },
  methods: {
    showListChange() {
      this.wavesurfer.clearRegions();
      this.drawRegion();
    },
    wavesurferAddRegion(start, end, color) {
      this.wavesurfer.addRegion({
        start: start, // 区域开始时间
        end: end, // 区域结束时间
        color: color, // 区域颜色
        drag: false, // 是否可拖拽
        resize: false, // 是否可改变大小
      });
    },
    drawRegion() {
      this.showList.forEach((regionType) => {
        let regionInfo = this.regionDic[regionType];
        this[regionInfo.dataMark].forEach((item) => {
          this.wavesurferAddRegion(item.start, item.end, regionInfo.color);
        });
      });
    },
  },
};
</script>
<style scoped>
.colorTag {
  display: inline-block;
  height: 10px;
  width: 30px;
}
.waveBox {
  border: 1px solid gray;
  margin-top: 15px;
}
</style>