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

安装 wavesurfer.js

cnpm i wavesurfer.js --save

无 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>

常用方法

播放/暂停

this.wavesurfer.playPause();

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

this.wavesurfer.stop();

快进/快退播放

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

改变音量

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

this.wavesurfer.setVolume(0.5);

改变音频播放速度

默认为1

this.wavesurfer.setPlaybackRate(2)

缩放波形图

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

this.wavesurfer.zoom（88）

指定播放范围

从第10秒开始播放

this.wavesurfer.play(10);

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

this.wavesurfer.play(1, 10);

获取当前播放位置

this.wavesurfer.getCurrentTime()

获取音频片段的持续时间

this.wavesurfer.getDuration();

其他方法

创建播放实例后调用

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();
      });

谷歌浏览器默认禁止音频自动播放，解除此设置的方法为：
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>

插件–指针轴

在这里插入图片描述

<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>

插件–标注

在这里插入图片描述

<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>

新增标注

      this.wavesurfer.addMarker({
    
    
        time: 60,
        label: "第60秒",
        color: "blue",
        position: "top",
      });

插件–区域

官方文档 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>

新增区域

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

清除区域

this.wavesurfer.clearRegions()

绘制视频波形图

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

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

安装 wavesurfer.js

绘制音频波形图

常用方法

播放/暂停

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

快进/快退播放

改变音量

改变音频播放速度

缩放波形图

指定播放范围

获取当前播放位置

获取音频片段的持续时间

其他方法

常用事件

自动播放

插件–时间轴

插件–指针轴

插件–标注

新增标注

插件–区域

新增区域

清除区域

绘制视频波形图

绘制渐变色的炫彩波形图

改变左右声道

更多功能

实战范例

猜你喜欢

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