使⽤wavesurfer.js绘制⾳频波形图⼩⽩极速上⼿总结
⼀、简介
1.1 引
公司有语⾳识别业务，需要做⼀个web⽹页来整合语⾳引擎的标注结果和错误率等参数，并提供⼈⼯⽐对的语⾳标注功能（功能类似于TranscriberAG等），（博主有点话痨。。。适应适应，原谅我） 可以直接读第⼆⾏，简单来说，我⽤wavesurfer.js绘制波形，并提供语⾳标注的⽂本框进⾏⾳频标注，简易页⾯如下：
1.2 啥是wavesurf？
wavesurfer.js是⼀个可⾃定义的语⾳⾳频可视化⼯具，建⽴于web audio和H5 canvas之上
⼆、Let's Start
本⽂是wavesurf的简单实现⼩⽩教程
按照下⾯步骤，你就可以极速的应⽤wavesurfer.js实现⼀个⾳频的可视化啦~~
1、将wavesurfer.js的包引⽤到项⽬中
<script src="unpkg/wavesurfer.js"></script>
2、为wavesurfer.js开辟⼀个空间，⽤来画图
<div id="waveform" class="waveform"></div>
3、在script标签中，创建⼀个wavesurfer实例，传递容器选择器及⼀些选项（更多选项在官⽅⽂档option中，可查阅⾃⾏添加）
var wavesurfer = ate({
container: '#waveform',
waveColor: 'violet',
cursorColor:'#ff0000',
progressColor:'#0000ff',
});
4、加载⾳频。⽤wavesurfer.js⽅法中的load()，直接传⼊⾳频路径即可，可以是在线⾳频（需注意跨域问题），更多可⽤函数参阅⽂档中的Method⼀项
wavesurfer.load('audio.wav');
5、我们可以⽤wavesurfer.playpause() 和 wavesurfer.stop()创建好⽤的播放暂停按钮和重播按钮，需要注意的是要在相应的html中创建button
var playPause = document.querySelector('#playPause');
playPause.addEventListener('click', function() {
wavesurfer.playPause();
});
<('play', function() {
document.querySelector('#play').style.display = 'none';
document.querySelector('#pause').style.display = '';
});
<('pause', function() {
document.querySelector('#play').style.display = '';
document.querySelector('#pause').style.display = 'none';
});
btnStop.addEventListener('click', function () {
wavesurfer.stop();
});
创建相应按钮：
<div class="box">
<button id="playPause">
<span id="play">
<i class=""></i>
Play
</span>
<span id="pause" >
<i class=""></i>
jquery官方文档下载Pause
</span>
</button>
<button id="btnStop">Stop</button>
</div>
三、贴⼀份可以直接运⾏的demo！
demo中加⼊了时间插件（timeline），频谱插件（spectrogram）、光标插件（cursor）等，可⾃⾏删除，
近⽇收到有关于wavesurfer插件下载的相关问题，增加此内容：
wavesurfer相关插件如时间插件（timeline），频谱插件（spectrogram）等，可在官⽹Document，Api中，到相关插件，点击右上的source后，control + s 即可保存到本地
此代码运⾏还需要将相应的插件从官⽹下载下来，再将⾳频存⼊合适位置即可
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title></title>
6<link href="test.css" type="text/css" rel="stylesheet">
7<script src="jquery.js"></script> //可⾃⾏下载jquery包
8</head>
9
10<body>
11<h1> ZX test demo Wavesurfer.js</h1>
12<br/><br/><br/><br/><br/>
13
14<script src="wavesurfer.min.js"></script> //此包需要从官⽹下载下来，src中填⼊合适路径即可
15<script src="wavesurfer.timeline.js"></script> //此包需要从官⽹下载下来，src中填⼊合适的路径即可
16<script src="wavesurfer.cursor.js"></script> //此包需要从官⽹下载，直接打开插件源码，
按ctrl+s 选择路径保存即可，src中填⼊合适的路径
17<script src="wavesurfer.spectrogram.js"></script> //这⼏个包都⼀样
18
19
20<div id="waveform" class="waveform"></div>
21<br/>
22<div id="wave-timeline" class="wave-timeline"></div>
23<div class="zoom">
24<!-- <input data-action="zoom" type="range" min="1" max="200" value="0" /> -->
25<input data-action="zoom" type="range" min="1" max="200" value="0"/>
26</div>
27<div id="wave-spectrogram" class="wave-spectrogram"></div>
28<br/><br/>
29<div class="box">
30<button id="playPause">
31<span id="play">
32<i class=""></i>
33 Play
34</span>
35
36<span id="pause" >
37<i class=""></i>
38 Pause
39</span>
40</button>
41
42<button id="btnStop">Stop</button>
43</div>
44<script>
45 document.addEventListener('DOMContentLoaded', function() {
46var wavesurfer = ate({
47 container: '#waveform',
48 barHeight: 2,
49 cursorColor:'#ff0000',
50 progressColor:'#0000ff',
51 scrollParent:true,
52 height:160,
53 cursorWidth:2,
54 autoCenter:false,
55 fillParent:true,
56 hideScrollbar:false,
57
58
59 plugins: [
60 ate({ //timeline plugin
61 container: "#wave-timeline",
62 height: 10,
63 }),
64 ate({ //cursor plugin
65 container:"#wave-cursor",
66 showTime: true,
67 opacity: 1,
68 customShowTimeStyle: {
69 'background-color': '#000',
70 color: '#fff',
71 padding: '2px',
72 'font-size': '10px'
73 }
74 }),
75 ate({
76 wavesurfer: wavesurfer,
77 container: "#wave-spectrogram",
78 labels: true,
79 fftSamples:512
80 })
81 ]
82
83
84 });
85
86//TimeLine
('ready', function () {
88var timeline = ate(WaveSurfer.timeline);
89
90 ate({
91 wavesurfer: wavesurfer,
92 container: '#wave-timeline'
93 });
94 });
95
96// load ⾳频
97 wavesurfer.load('0f35840eeddd47e6a6d0fe0971db277c.wav'); //此处添加⾃⼰的⾳频路径（可将⾳频存⼊前端可访问的⽂件夹内，避免跨域） 98
99 console.Duration()); //test
100 console.Volume()); // test
101 setTimeout(function(){ //test
102 console.Duration());
103 },500)
104
105//Stop
106 btnStop.addEventListener('click', function () {
107 wavesurfer.stop();
108 });
109// PlayPause
110var playPause = document.querySelector('#playPause');
111 playPause.addEventListener('click', function() {
112 wavesurfer.playPause();
113 });
114// Toggle play/pause text
115 ('play', function() {
116 document.querySelector('#play').style.display = 'none';
117 document.querySelector('#pause').style.display = '';
118 });
119 ('pause', function() {
120 document.querySelector('#play').style.display = '';
121 document.querySelector('#pause').style.display = 'none';
122 });
123
124var d1 = new Date(); //test
125 console.LocaleString()); //test
126 console.log('test'); //test
127
128// Zoom slider
129var slider = document.querySelector('[data-action="zoom"]');
130 slider.value = wavesurfer.params.minPxPerSec;
131 slider.min = wavesurfer.params.minPxPerSec;
132 slider.addEventListener('input', function() {
133 (Number(this.value));
134 });
135
136 });
137</script>
138</body>
139</html>
四、上述代码运⾏效果
上述demo为仅作为学习之⽤的简易使⽤，⼯程中需注意个中其他细节
（⽔平有限，⽇志基本作记录本之⽤，欢迎指正错误，欢迎交流）
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论