vue 绘制波形图 wavesurfer.js （音频/视频） 实用教程
Posted 朝阳39
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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绘制音频的波形图
有时候，为了直观地分析音频的特征，画几个图是必不可少的。
当然，读者可以把音频文件拉到Adobe Audition或其它音频分析软件中，再使用它绘制出来的特征图。
那有没有办法自己写代码来绘制，并做一些灵活的控制呢？
本文介绍通过python的matplotlib.pyplot来绘制波形图。
pyplot是一个强大的绘图库，小程这里用来绘制波形，也只是牛刀小试。
小程先用自己的话，解释一些本文会提到的基础概念。
声道数，也叫通道数，这在采集声音（录制）时就引入的概念，可以理解为用几个通道去录制声音。比如一个人唱歌时，可以在他的左前方跟右前方（与声源同距离同方位），分别放一个通道去录制，这时两个通道录到的数据很可能是接近或相同的，如果距离或方位不同，则录制到的音频就会有差别。为了真实地还原现场，可以考虑多个通道进行录制，但也需要考虑录制后播放时是否支持多通道（否则还是达不到效果）。一般来说，单声道或双声道的音频文件还是比较常见的。
采样率，针对一个通道而言，也就是1秒钟一个通道采集的样本个数，各个通道各自采集。一般来说，常见的音频文件的采样率都比较高，比如44100Hz、32000Hz之类。读者在看波形图时，看到“一团一团”的波形，这跟采样率很大有关，比如一秒内采集到4万多个样本，然后要在一秒的刻度上反映出这4万个点的振动情况，都聚集在一起了。
位深，也叫量化精度、位宽，即对一个样本的值用多少bit去表示它，用的bit越多，能表示的值就越多，也就越能接近样本的原值。比如极端一点，用2个bit去表示，那能表示的值就只能是0、1、2、3，那不管样本的值是多少，最终都会就近地选择这4个值中的一个，这样的话，所有样本在量化后的层次就很少（就4个值，对应电平）。如果用16bit、24bit或更多的bit去量化样本的值，层次就多得多，最终听起来会更细腻，当然存储的体积也更大。
帧数，也叫样本个数。对于“总帧数”要根据上下文来判断，有可能是一个通道（声道）的总帧数，也有可能是所有通道的总帧数。对于样本个数，是可以通过文件的大小与位深计算出来的。比如，对于一个pcm文件，已经知道文件大小是fs，采样精度为w个字节（比如2个字节），那所有通道的样本个数是(fs / w)，如果是n个通道，则一个通道的样本个数是(fs / w / n)。
波形图，也叫振幅图，是音频的振幅（或能量）这个维度的图形表达。对于波形图，横坐标是时间，纵坐标一般有两种表示方式，一种方式是用dB来表示（就是分贝，读者可以留意后面的截图），audition就用dB来表示；另一种方式是用[-1, 1]这个范围来表示，这种方式并不关心具体的能量值，只关心振幅的趋势，所以用归一化的思路固定一个变化的范围就可以了。
介绍完这些枯燥的概念后，小程先摆一个绘制波形的代码，再在后面做一些解释。
import wave
import matplotlib
matplotlib.use(‘TkAgg‘)
import matplotlib.pyplot as plt
import os, sys
import audioread
import numpy as np
def decode2wav(srcname, outname):
f = audioread.audio_open(filename)
nsample = 0
for buf in f:
nsample += 1
f.close()
with audioread.audio_open(filename) as f:
print("input file: channels=%d, samplerate=%d, duration=%d" % (f.channels, f.samplerate, f.duration))
channels = f.channels
samplewidth = 2
samplerate = f.samplerate
compresstype = "NONE"
compressname = "not compressed"
outwav = wave.open(outname, ‘wb‘)
outwav.setparams((channels, samplewidth, samplerate, nsample, compresstype, compressname))
for buf in f:
outwav.writeframes(buf)
outwav.close()
def pcm2wav(srcname, outname, channels, samplewidth, samplerate):
fs = os.path.getsize(srcname)
nsample = fs / samplewidth
outwav = wave.open(outname, ‘wb‘)
outwav.setparams((channels, samplewidth, samplerate, nsample, "NONE", "not cmopressed"))
fsrc = open(srcname, ‘rb‘)
outwav.writeframes(fsrc.read())
fsrc.close()
outwav.close()
if __name__ == ‘__main__‘:
filename = sys.argv[1]
filename = os.path.abspath(os.path.expanduser(filename))
if not os.path.exists(filename):
print("input file not found, then exit")
exit(1)
path, ext = os.path.splitext(filename)
wavpath = path + ".wav"
if ext != ‘.wav‘:
if ext == ".pcm":
if len(sys.argv) < 5:
print("when input pcm, parameters should be [pcmfilename, channelcount, samplewidth_byte, samplerate]")
exit(1)
chcout = int(sys.argv[2])
bitwidth = int(sys.argv[3])
samplerate = int(sys.argv[4])
pcm2wav(filename, wavpath, chcout, bitwidth, samplerate)
else:
decode2wav(filename, wavpath)
wav = wave.open(wavpath, ‘rb‘)
channels, samplewidth, samplerate, nframe = wav.getparams()[:4]
print("in wav file params: (%d:%d:%d:%d)" % (channels, samplewidth, samplerate, nframe))
audiobyte = wav.readframes(nframe)
wav.close()
time = np.arange(0, nframe) * (1.0 / samplerate)
numdata = np.fromstring(audiobyte, dtype=np.int16)
numdata = numdata * 1.0 / max(abs(numdata))
numdata = np.reshape(numdata, (nframe, channels))
# plt.figure()
for i in range(channels):
plt.subplot(channels*2-1, 1, i*2+1)
plt.plot(time, numdata[:, i])
plt.xlabel("times(s)")
plt.ylabel("amplitude")
plt.title("wave - channel %d" % (i+1))
plt.show()
大体的思路是先把音频文件解码出pcm数据并写成wav文件，再使用pyplot对wav文件进行绘制（实际只需要绘制样本归一化后的值）。
小程先展示下执行的效果。
可以这样执行这个脚本，分别输入wav、mp3、pcm与flac文件：
运行后可以得到相应的波形图，这里提供几个截图。
*. 单声道的波形：
对应，audition分析到的波形是这样的：
*. 双声道的波形：
对应，audition分析到的波形是这样的：
然后，小程对关键的代码做一些解释，请参考下面的截图。
其中，pyplot的函数subplot()，作用是画子图。subplot(rownum, clonum, curnum)，前两个参数指定画多少行多少列，最后一个参数是当前子图的编号，按从左往右，从上往下的顺序进行编号。
比如：
plt.subplot(2, 1, 1) -- 画两行一列（两个子图），在第一个子图绘制。
numpy的函数reshape()，作用是给原数组一个新的形状，也就是重新定义行列数，但不改变数组的值。
比如：
numdata = np.reshape(numdata, (nframe, channels)) -- 把numdata改为nframe行，channels列。
至此，通过pyplot绘制波形图的实现介绍完毕了。
总结一下，本文介绍了如何通过pyplot来绘制音频波形图的办法，讲解了一些概念，也解释了代码上的实现。从代码实现以及概念的理解的角度来说，难度系数为3。
以上是关于vue 绘制波形图 wavesurfer.js （音频/视频） 实用教程的主要内容，如果未能解决你的问题，请参考以下文章
使用网络音频 api 和 wavesurfer.js 剪切和粘贴音频
Labview波形图 怎么做到不把绘制出来的图像删除 直接在上面绘制新的图形