Wavesurfer.js 生成音频波形图

代码如下，可直接复制

<template>
  <div class="mixin-components-container">
    <el-row>
      <el-card class="box-card" style="text-align: left">
        <div id="waveform" ref="waveform">
          <!-- Here be the waveform -->
        </div>
        <div id="wave-timeline" ref="wave-timeline">
          <!--时间轴 -->
        </div>
        <div class="buttonBox">
          <el-button type="primary" @click="rew">后退</el-button>
          <el-button type="primary" @click="plays">
            <i class="el-icon-video-play"></i>
            播放 /
            <i class="el-icon-video-pausee"></i>
            暂停
          </el-button>
          <el-button type="primary" @click="speek">前进</el-button>
          <el-button type="primary" @click="replay">重放</el-button>
          <el-tooltip
            class="item"
            effect="dark"
            content="指定播放"
            placement="bottom"
          >
            <el-popover placement="top" width="200" trigger="click">
              <el-input
                v-model="appointTime"
                placeholder="请输入内容"
                class="input-with-select"
              >
                <el-button slot="append" @click="appointPlay">播放</el-button>
              </el-input>
              <el-button slot="reference" circle> 指定播放 </el-button>
            </el-popover>
          </el-tooltip>
          <span
            style="
              border: 2px solid #2f4f4f;
              margin-left: 8px;
              margin-right: 4px;
            "
          />
          <el-tooltip
            class="item"
            effect="dark"
            content="音量"
            placement="bottom"
          >
            <el-popover
              placement="top-start"
              trigger="click"
              style="min-width: 38px; margin-left: 10px"
            >
              <div class="block" style="width: 42px">
                <el-slider
                  v-model="value"
                  vertical
                  height="100px"
                  @change="setVolume"
                />
              </div>
              <el-button slot="reference" circle> 音量 </el-button>
            </el-popover>
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            content="播放倍速"
            placement="bottom"
          >
            <el-popover
              placement="top"
              width="220"
              trigger="click"
              style="margin-left: 10px"
            >
              <el-input-number
                v-model="ds"
                width="180"
                :precision="2"
                :step="0.1"
                :min="0.5"
                :max="2"
                @change="DoubleSpeed"
              />
              <el-button slot="reference" round>
                {{ ds + " X" }}
              </el-button>
            </el-popover>
          </el-tooltip>
        </div>
      </el-card>
    </el-row>
  </div>
</template>
<script>
import WaveSurfer from "wavesurfer.js";
import CursorPlugin from "wavesurfer.js/dist/plugin/wavesurfer.cursor.js";
import Timeline from "wavesurfer.js/dist/plugin/wavesurfer.timeline.js";
export default {
  name: "Details",
  // components: { MyWaveSurfer },
  data() {
    return {
      wavesurfer: null,
      // 指定播放功能的播放时间点
      appointTime: 1,
      // 播放倍速
      ds: 1.0,
      // 设置音量
      value: 0,
    };
  },
  mounted() {
    this.$nextTick(() => {
      console.log(WaveSurfer);
      this.wavesurfer = WaveSurfer.create({
        // 应该在其中绘制波形的CSS选择器或HTML元素。这是唯一必需的参数。
        container: this.$refs.waveform,
        // 光标的填充颜色，指示播放头的位置。
        cursorColor: "red",
        // 更改波形容器的背景颜色。
        backgroundColor: "gray",
        // 光标后的波形填充颜色。
        waveColor: "violet",
        // 光标后面的波形部分的填充色。当progressColor和waveColor相同时，完全不渲染进度波
        progressColor: "purple",
        backend: "MediaElement",
        // 音频播放时间轴
        mediaControls: false,
        // 播放音频的速度
        audioRate: "1",
        // 插件：此教程配置了光标插件和时间轴插件
        plugins: [
          // 光标插件
          CursorPlugin.create({
            showTime: true,
            opacity: 1,
            customShowTimeStyle: {
              "background-color": "#000",
              color: "#fff",
              padding: "2px",
              "font-size": "10px",
            },
          }),
          // 时间轴插件
          Timeline.create({
            container: "#wave-timeline",
          }),
        ],
      });
      this.wavesurfer.on("error", function (e) {
        console.warn(e);
      });
      this.wavesurfer.load(require("../assets/朴树-平凡之路.mp3"));
    });
  },
  methods: {
    // 播放时暂停，播放时暂停
    plays() {
      this.wavesurfer.playPause();
    },
    // 后退，
    rew() {
      this.wavesurfer.skip(-3);
    },
    // 前进，
    speek() {
      this.wavesurfer.skip(3);
    },
    // 重放
    replay() {
      this.wavesurfer.stop();
    },
    // 设置音量：
    setVolume(val) {
      this.wavesurfer.setVolume(val / 100);
    },
    // 指定播放
    appointPlay() {
      this.wavesurfer.play([this.appointTime]);
    },
  },
};
</script>
<style scoped>
.mixin-components-container {
  background-color: #f0f2f5;
  padding: 30px;
  min-height: calc(100vh - 84px);
  box-sizing: border-box;
}
.buttonBox {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}
</style>