vue 绘制波形图 wavesurfer.js （音频/视频） 【实用教程】_vue wavesurfer.js

安装 wavesurfer.js

cnpm i wavesurfer.js --save
1

无 cnpm 的先运行 npm i cnpm -g 全局安装 cnpm

绘制音频波形图

常用的配置参数详见注释。

<template>
  <div style="padding: 30px">
    <div ref="waveform_Ref"></div>
    <div style="padding: 30px">
      <el-button
        type="primary"
        size="small"
        icon="el-icon-video-play"
        @click="playMusic"
        v-if="!playing"
      >
        播放 </el-button
      ><el-button
        v-if="playing"
        type="primary"
        size="small"
        icon="el-icon-video-pause"
        @click="playMusic"
      >
        暂停
      </el-button>
    </div>
  </div>
</template>

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

export default {
  data() {
    return {
      wavesurfer: null,
      playing: false,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.wavesurfer = WaveSurfer.create({
        // 波形图的容器
        container: this.$refs.waveform_Ref,
        // 已播放波形的颜色
        // progressColor: "red",
        // 未播放波形的颜色
        // 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.load(require("./《祝福你》群星_粤语.mp3"));
    });
  },
  methods: {
    playMusic() {
      this.wavesurfer.playPause.bind(this.wavesurfer)();
      this.playing = !this.playing;
    },
  },
};
</script>
<style scoped>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

常用方法

播放/暂停

this.wavesurfer.playPause();
1

停止播放（播放进度光标回到音频起点）

this.wavesurfer.stop();
1

快进/快退播放

// 从当前位置向后快进2秒播放
this.wavesurfer.skip(2);
// 从当前位置向后快退2秒播放
this.wavesurfer.skip(-2);
1
2
3
4

改变音量

参数值为0到1
– 0为静音
– 0.5为一半音量
– 1为最高音量

this.wavesurfer.setVolume(0.5);
1

改变音频播放速度

默认为1

this.wavesurfer.setPlaybackRate(2)
1

缩放波形图

参数是每秒音频的水平像素数。它还会更改参数minPxPerSec并启用该 scrollParent选项。

this.wavesurfer.zoom（88）
1

指定播放范围

从第10秒开始播放

this.wavesurfer.play(10);
1

播放第1-10秒之间的音频

this.wavesurfer.play(1, 10);
1

获取当前播放位置

this.wavesurfer.getCurrentTime()
1

获取音频片段的持续时间

this.wavesurfer.getDuration(); 
1

其他方法

创建播放实例后调用

• cancelAjax() – 取消音频文件加载过程。
• destroy() – 删除事件、元素并断开 Web 音频节点。
• empty() – 清除波形，就像加载了零长度音频一样。
• getActivePlugins() – 返回当前初始化的插件名称映射。
• getBackgroundColor() – 返回波形容器的背景颜色。
• getCursorColor() – 返回指示播放头位置的光标的填充颜色。
• getPlaybackRate() – 返回音频剪辑的播放速度。
• getProgressColor() – 返回光标后面波形的填充颜色。
• getVolume() – 返回当前音频剪辑的音量。
• getMute() – 返回当前静音状态。
• getFilters() – 返回当前设置过滤器的数组。
• getWaveColor() – 返回光标后波形的填充颜色。
• exportPCM(length, accuracy, noWindow, start)– 将 PCM 数据导出为 JSON 数组。可选参数length [number] - default: 1024, accuracy [number] - default: 10000, noWindow [true|false] - default: false,start [number] - default: 0
• exportImage(format, quality, type) – 将波形图像作为数据 URI 或 Blob 返回。
• isPlaying()–true如果当前正在播放则返回，否则返回false。
• load(url, peaks, preload)–URL通过 XHR加载音频。的可选数组peaks。可选preload参数[none|metadata|auto]，如果使用后端 MediaElement ，则传递给Audio 元素。
• loadBlob(url)– 从Blob或File对象加载音频。
• on(eventName, callback)– 订阅事件。
• un(eventName, callback) – 取消订阅事件。
• unAll() – 取消订阅所有事件。
• pause() – 暂停播放。
• seekAndCenter(progress)– 寻求进度和中心视图[0…1]（0 = 开始，1 = 结束）。
• seekTo(progress)– 寻求进步[0…1]（0 = 开始，1 = 结束）。
• setBackgroundColor(color) – 设置波形容器的背景颜色。
• setCursorColor(color) – 设置指示播放头位置的光标的填充颜色。
• setHeight(height) – 设置波形的高度。
• setFilter(filters)- 用于将您自己的 WebAudio 节点插入图中。请参阅下面的连接过滤器。
• setPlayEnd(position) – 设置播放停止点（以秒为单位）。
• setMute(mute)– 静音当前声音。可以是true静音或false取消静音的布尔值
• setProgressColor(color) – 设置光标后面波形的填充颜色。
• setWaveColor(color) – 设置光标后波形的填充颜色。
• skipBackward()- 倒带skipLength秒。
• skipForward()- 跳过skipLength几秒钟。
• setSinkId(deviceId) - 设置接收器 ID 以更改音频输出设备。
• toggleMute() – 打开和关闭音量。
• toggleInteraction() – 切换鼠标交互。
• toggleScroll()– 切换scrollParent。

常用事件

使用on()和un() 方法订阅和取消订阅各种播放器事件

• audioprocess– 在音频播放时持续触发。也在寻找上火。
• dblclick – 双击实例时。
• destroy – 当实例被销毁时。
• error– 发生错误。回调将收到（字符串）错误信息。
• finish – 当它完成播放时。
• interaction – 与波形交互时。
• loading– 使用 fetch 或 drag’n’drop 加载时连续触发。回调将以百分比 [0…100] 接收（整数）加载进度。
• mute– 静音更改。回调将收到（布尔值）新的静音状态。
• pause – 音频暂停时。
• play – 播放开始时。
• ready– 加载音频、解码并绘制波形时。使用 MediaElement 时，这会在绘制波形之前触发，请参阅waveform-ready。
• scroll- 当滚动条移动时。回调将接收一个ScrollEvent对象。
• seek– 在寻求。回调将收到（浮动）进度[0…1]。
• volume– 关于音量变化。回调将接收（整数）新卷。
• waveform-ready– 在使用 MediaElement 后端绘制波形后触发。如果您使用的是 - - - WebAudio 后端，则可以使用ready.
• zoom– 关于缩放。回调将接收（整数）minPxPerSec。

自动播放

      this.wavesurfer.load(require("./《祝福你》群星_粤语.mp3"));

      // 自动播放
      let that = this;
      this.wavesurfer.on("ready", function () {
        that.wavesurfer.play();
      });
1
2
3
4
5
6
7

谷歌浏览器默认禁止音频自动播放，解除此设置的方法为：
https://blog.csdn.net/weixin_41192489/article/details/127671295

插件–时间轴

<template>
  <div style="padding: 30px">
    <div ref="waveform_Ref"></div>
    <div ref="timeline_Ref"></div>
    <div style="padding: 30px">
      <el-button
        type="primary"
        size="small"
        icon="el-icon-video-play"
        @click="playMusic"
        v-if="!playing"
      >
        播放 </el-button
      ><el-button
        v-if="playing"
        type="primary"
        size="small"
        icon="el-icon-video-pause"
        @click="playMusic"
      >
        暂停
      </el-button>
    </div>
  </div>
</template>

<script>
import WaveSurfer from "wavesurfer.js";
 //导入插件--时间轴
import Timeline from "wavesurfer.js/dist/plugin/wavesurfer.timeline.js";

export default {
  data() {
    return {
      wavesurfer: null,
      playing: false,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.wavesurfer = WaveSurfer.create({
        container: this.$refs.waveform_Ref,
        plugins: [
           //插件--时间轴的配置
          Timeline.create({
            container: this.$refs.timeline_Ref,
            fontSize: 14,
            //主要时间标签颜色
            primaryColor: "#9191a5",
            //主要时间文字颜色
            primaryFontColor: "#9191a5",
            //次要时间标签颜色
            secondaryColor: "#9191a5",   
            //次要时间文字颜色
            secondaryFontColor: "#9191a5",
            }),
        ],
      });
      this.wavesurfer.load(require("./《祝福你》群星_粤语.mp3"));
    });
  },
  methods: {
    playMusic() {
      this.wavesurfer.playPause();
      this.playing = !this.playing;
    },
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

插件–指针轴

<template>
  <div style="padding: 30px">
    <div ref="waveform_Ref"></div>
  </div>
</template>

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

export default {
  data() {
    return {
      wavesurfer: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.wavesurfer = WaveSurfer.create({
        container: this.$refs.waveform_Ref,
        plugins: [
          // 插件--指针轴的配置
          CursorPlugin.create({
            showTime: true,
            opacity: 1,
            customShowTimeStyle: {
              "background-color": "#000",
              color: "#fff",
              padding: "2px",
              "font-size": "10px",
            },
          }),
        ],
      });
      this.wavesurfer.load(require("./《祝福你》群星_粤语.mp3"));
    });
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

插件–标注

<template>
  <div style="padding: 30px">
    <div ref="waveform_Ref"></div>
  </div>
</template>

<script>
import WaveSurfer from "wavesurfer.js";
// 导入插件--标注
import markers from "wavesurfer.js/dist/plugin/wavesurfer.markers.js";
export default {
  data() {
    return {
      wavesurfer: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.wavesurfer = WaveSurfer.create({
        container: this.$refs.waveform_Ref,
        plugins: [
          // 插件--标注的配置
          markers.create({
            markers: [
              {
                time: 15,
                label: "第15秒",
                color: "red",
              },
              {
                time: 40,
                label: "第40秒",
                color: "blue",
                position: "top",
              },
            ],
          }),
        ],
      });
      this.wavesurfer.load(require("./《祝福你》群星_粤语.mp3"));
    });
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

新增标注

      this.wavesurfer.addMarker({
        time: 60,
        label: "第60秒",
        color: "blue",
        position: "top",
      });
1
2
3
4
5
6

插件–区域

官方文档 https://wavesurfer-js.org/plugins/regions.html

<template>
  <div style="padding: 30px">
    <div ref="waveform_Ref"></div>
  </div>
</template>

<script>
import WaveSurfer from "wavesurfer.js";
// 导入插件--区域
import RegionsPlugin from "wavesurfer.js/dist/plugin/wavesurfer.regions.min.js";
export default {
  data() {
    return {
      wavesurfer: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.wavesurfer = WaveSurfer.create({
        container: this.$refs.waveform_Ref,
        plugins: [
          // 插件--区域的配置
          RegionsPlugin.create({
            regionsMinLength: 2,
            regions: [
              {
                start: 10,
                end: 30,
                loop: false,
                color: "hsla(400, 100%, 30%, 0.5)",
              },
              {
                start: 50,
                end: 70,
                loop: false,
                color: "hsla(200, 50%, 70%, 0.4)",
                minLength: 1,
                maxLength: 5,
              },
            ],
            dragSelection: {
              slop: 5,
            },
          }),
        ],
      });
      this.wavesurfer.load(require("./《祝福你》群星_粤语.mp3"));
    });
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

新增区域

 this.wavesurfer.addRegion({
        start: 2, // 区域开始时间
        end: 10,// 区域结束时间
        color: "red",// 区域颜色
        drag: false,// 是否可拖拽
        loop: false,// 是否循环播放
        resize: false,// 是否可改变大小
        minLength: 1, // 区域最小值
        maxLength: 5, // 区域最大值
      });

1
2
3
4
5
6
7
8
9
10
11

清除区域

this.wavesurfer.clearRegions()
1

绘制视频波形图

https://wavesurfer-js.org/example/video-element/index.html

绘制渐变色的炫彩波形图

https://wavesurfer-js.org/example/gradient-fill-styles/index.html

改变左右声道

https://wavesurfer-js.org/example/panner/index.html

更多功能

详见官网文档 https://wavesurfer-js.org/docs/

实战范例

• 多区域音频标注（含区域实时切换显示）
  https://blog.csdn.net/weixin_41192489/article/details/127671570