2021/11/26 wavesurfer的使用 及插件的使用

效果图

完整代码如下

<template>
  <div class="mixin-components-container">
    <el-row>
      <el-card class="box-card" style="text-align: left">
        <div slot="header" class="clearfix title">
          <span>Vue框架中嵌入使用wavesurfer.js插件</span>
        </div>
        <div id="waveform" ref="waveform">
          <!-- Here be the waveform -->
        </div>
        <div id="wave-timeline" ref="wave-timeline">
          <!--时间轴 -->
        </div>
        <el-row class="row">
          <!-- 播放/暂停按钮 -->
          <el-col :span="2">
            <el-button type="primary" @click="playMusic">
              <i class="el-icon-video-play"></i>
              播放 /
              <i class="el-icon-video-pausee"></i>
              暂停
            </el-button>
          </el-col>
          <!-- 前进 -->
          <el-col :span="2">
            <div class="grid-content bg-purple-dark">
              <el-button class="allbtn normal primary" @click="forward">
                Forward
              </el-button>
            </div>
          </el-col>
          <!-- 选中区域播放/暂停按钮 -->
          <el-col :span="3">
            <el-button type="primary" @click="play">
              <i class="el-icon-video-play"></i>
              播放 选中区域
            </el-button>
          </el-col>
          <el-col :span="0.7">
            <i class="el-icon-zoom-in"></i>
          </el-col>
          <!-- 波形缩放 -->
          <el-col :span="4">
            <input
              data-action="zoom"
              @change="zoom(zooms)"
              v-model="zooms"
              type="range"
              min="20"
              max="1000"
              value="0"
              style="width: 98%"
            />
          </el-col>
          <el-col :span="0.7">
            <i class="el-icon-zoom-out"></i>
          </el-col>
          <!-- 音量 -->
          <el-col :span="2" style="margin-left: 25px">
            <div class="grid-content bg-purple-dark">
              <el-popover
                placement="top-start"
                trigger="click"
                width="45"
                min-width="45"
                style="min-width: 38px"
              >
                <div class="block" style="width: 42px">
                  <el-slider
                    v-model="volumeValue"
                    vertical
                    height="100px"
                    @change="setVolume(volumeValue)"
                  />
                </div>
                <el-button class="normal allbtn primary" slot="reference">
                  Volume
                </el-button>
              </el-popover>
            </div>
          </el-col>
          <!-- 倍速播放 -->
          <el-col :span="2">
            <div class="grid-content bg-purple-dark">
              <el-tooltip
                class="item"
                effect="dark"
                content="Play speed"
                placement="bottom"
              >
                <el-popover
                  placement="top"
                  width="180"
                  trigger="click"
                  style="margin-left: 10px"
                >
                  <el-input-number
                    v-model="speed"
                    width="180"
                    :precision="2"
                    :step="0.5"
                    :min="0.5"
                    :max="2"
                    @change="DoubleSpeed(speed)"
                  />
                  <el-button slot="reference" round>
                    {{ speed + " X" }}
                  </el-button>
                </el-popover>
              </el-tooltip>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </el-row>
  </div>
</template>
<script>
import WaveSurfer from "wavesurfer.js";
import Timeline from "wavesurfer.js/dist/plugin/wavesurfer.timeline.js";
import Regions from "wavesurfer.js/dist/plugin/wavesurfer.regions.js";
import CursorPlugin from "wavesurfer.js/dist/plugin/wavesurfer.cursor.js";
export default {
  name: "Details",
  data() {
    return {
      voiceSrc:"",
      wavesurfer: null,
      zooms: 100, //缩放
      volumeValue: [1], //音频音量
      speed: 1.0, //倍速
      screenWidth: document.body.clientWidth,
      duration: 336, //音频时长 s
      //选中区域
      regions: {
        start: 0,
        end: 0,
        loop: true,
        showTooltip: true,
      },
      curRegion: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      console.log(WaveSurfer);
      this.wavesurfer = WaveSurfer.create({
        container: this.$refs.waveform,
        //是否波形图滚动
        scrollParent: true,
        //是否隐藏水平滚动条
        hideScrollbar: false,
        //波形显示为柱形
        barWidth: 5,
        //波形颜色
        waveColor: "#409EFF",
        progressColor: "blue",
        backend: "MediaElement",
        mediaControls: false,
        audioRate: "1",
        //使用时间轴插件
        plugins: [
          Timeline.create({
            container: "#wave-timeline",
          }),
          // 选中区域
          Regions.create({
            showTime: true,
            regions: [
              {
                start: 10, //选中区域开始时间
                end: 20, //选中区域开始时间
                attributes: {
                  label:
                    "选中区域开始时间1",
                },
                data: {
                  note: "选中区域开始时间1",
                },
                loop: false, //播放时是否循环播放片段
                drag: true, //允许/禁止拖动区域
                resize: true, //允许/禁止调整区域大小
                color: " rgba(181, 198, 241, 0.5)", //选中区块颜色
              },
              {
                start: 30, //选中区域开始时间
                end: 45, //选中区域开始时间
                attributes: {
                  label: "选中区域开始时间2",
                },
                data: {
                  note: "选中区域开始时间2",
                },
                loop: false, //播放时是否循环播放片段
                drag: true, //允许/禁止拖动区域
                resize: true, //允许/禁止调整区域大小
                color: " rgba(181, 198, 241, 0.5)", //选中区块颜色
              },
              {
                start: 60, //选中区域开始时间
                end: 75, //选中区域开始时间
                attributes: {
                  label: "选中区域开始时间3",
                },
                data: {
                  note: "选中区域开始时间3",
                },
                loop: false, //播放时是否循环播放片段
                drag: true, //允许/禁止拖动区域
                resize: true, //允许/禁止调整区域大小
                color: " rgba(181, 198, 241, 0.5)", //选中区块颜色
              },
            ],
          }),
          // 光标插件
          CursorPlugin.create({
            showTime: true,
            opacity: 1,
            customShowTimeStyle: {
              "background-color": "#000",
              color: "#fff",
              padding: "5px",
              "font-size": "10px",
            },
          }),
        ],
      });
      // this.wavesurfer.on("seek", (e) => {
      //   console.log(e, "aaa");
      //   // console.log(e * 100 + "%", "eee");
      // });

      //创建region
      this.curRegion = this.wavesurfer.addRegion({});
      // 特别提醒：此处需要使用require(相对路径)，否则会报错
      this.wavesurfer.load(require(""));
      // this.wavesurfer.load(this.voiceSrc);
      let that = this;

      window.onresize = () => {
        return (() => {
          window.screenWidth = document.body.clientWidth;
          that.screenWidth = window.screenWidth;
        })();
      };
    });
  },
  methods: {
    playMusic() {
      //"播放/暂停"按钮的单击触发事件，暂停的话单击则播放，正在播放的话单击则暂停播放
      this.wavesurfer.playPause.bind(this.wavesurfer)();
    },

    play() {
      // 循环播放该区域
      this.curRegion.playLoop();
    },

    //波形图缩放
    zoom(val) {
      console.log(val);
      this.wavesurfer.zoom(val);
    },
    // 前进，
    forward() {
      this.wavesurfer.skip(2);
    },
    // 设置音量：
    setVolume(val) {
      this.wavesurfer.setVolume(val / 100);
      console.log(val);
      // getVolume() –返回当前音频片段的音量。
      // console.log(this.wavesurfer.getVolume());
    },
    //倍速播放
    DoubleSpeed(rate) {
      this.wavesurfer.setPlaybackRate(rate);
      // console.log(rate);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style   scoped>
.myplay {
  position: absolute;
  top: 50%;
  font-size: 17px;
  margin: -10px 0 0 -9px;
  left: 50%;
}
.mystop {
  position: absolute;
  top: 50%;
  margin: -15px 0 0 -18px;
  left: 50%;
  font-size: 25px;
}
#waveform {
  width: calc(100%);
  height: 128px;
  float: left;
  margin-right: 22px;
  background: #fff;
}
/* 去除padding */
/deep/.box-card .el-card__body {
  padding: 10px 0px !important;
}
/* 美化滚动条 */
/deep/#waveform ::-webkit-scrollbar {
  height: 10px;
  background-color: #ccc;
}
/deep/#waveform ::-webkit-scrollbar-thumb {
  background-color: #3366ff;
  border-radius: 10px;
  background-image: -webkit-linear-gradient(
    right,blue,#409EFF
  );
}
.row {
  margin-top: 15px;
}

/deep/#waveform .wavesurfer-region:before {
  content: attr(data-region-label);
  position: absolute;
  top: 0;
  padding: 3px 10px 3px;
}
.play {
  position: relative;
  width: 128px;
  height: 128px;
  border-radius: 3px;
  background-color: #ebeef5;
  float: left;
  text-align: center;
}
.play p {
  margin-top: 85px;
  color: #3683fa;
}

.waveformOuter {
  margin-bottom: 20px;
  overflow: hidden;
}
</style>

遇到的问题

如何在wavesurfer绘制的region上显示文本	参考如何在wavesurfer绘制的region上显示文本 - 知乎 但是加css样式的时候加不上 解决方法：
播放音频选中区域	this.curRegion.playLoop(); //循环播放该区域 this.curRegion.play(); //从start到播放该区域一次end。
发现一个好用的音频字幕网站	点滴字幕-自动字幕生成 字幕格式转换 文本语音对齐
如何使用wavesurfer中Cursor（光标）插件	import CursorPlugin from "wavesurfer.js/dist/plugin/wavesurfer.cursor.js"; // 光标插件 CursorPlugin.create({ showTime: true, opacity: 0.5, customShowTimeStyle: { "background-color": "#000", color: "#fff", padding: "5px", "font-size": "10px", }, }),
美化wavesurfer横向滚动条	/* 美化滚动条 */ /deep/#waveform ::-webkit-scrollbar { height: 10px; background-color: #ccc; } /deep/#waveform ::-webkit-scrollbar-thumb { background-color: #3366ff; border-radius: 10px; background-image: -webkit-linear-gradient(right, blue, #409eff); }
Region插件拖拽之后 时间(开始和结束)更改	this.curRegion.update({ start: this.curStart, end: this.curEnd });
Region选中区域改变触发	//方法 saveRegions() { this.list = this.wavesurfer.regions.list; // const time = this.wavesurfer.getCurrentTime(); // let min = null; Object.keys(this.list).forEach((id) => { const cur = this.list[id]; this.list = cur; }); this.curStart = this.list.start.toFixed(3); this.curEnd = this.list.end.toFixed(3); }, //在需要获取region区域的地方调用 this.wavesurfer.on("region-updated", this.saveRegions);
...待增加

wavesurfer官网文档：wavesurfer.js