一、简介
1.1 引
人生中第一份工作公司有语音识别业务，需要做一个web网页来整合语音引擎的标注结果和错误率等参数，并提供人工比对的语音标注功能（功能类似于TranscriberAG等），（博主有点话痨。。。适应适应，原谅我）
可以直接读第二行，简单来说，我用wavesurfer.js绘制波形，并提供语音标注的文本框进行音频标注，简易页面如下：
1.2 啥是wavesurf？
wavesurfer.js是一个可自定义的语音音频可视化工具，建立于web audio和H5 canvas之上
二、Let's Start
wavesurfer.js官网：https://wavesurfer-js.org/，官方文档为全英文，（chrome浏览器的翻译功能很不错），官网中文档option中有创建时的所有参数，method中有可调用的方法，API文档也很全面，可自取实现，
本文是wavesurf的简单实现小白教程
按照下面步骤，你就可以极速的应用wavesurfer.js实现一个音频的可视化啦~~
1、将wavesurfer.js的包引用到项目中
<script src="https://unpkg.com/wavesurfer.js"></script>
2、为wavesurfer.js开辟一个空间，用来画图
<div id="waveform" class="waveform"></div>
3、在script标签中，创建一个wavesurfer实例，传递容器选择器及一些选项（更多选项在官方文档option中，可查阅自行添加）
var wavesurfer = WaveSurfer.create({
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();
});
wavesurfer.on('play', function() {
document.querySelector('#play').style.display = 'none';
document.querySelector('#pause').style.display = '';
});
wavesurfer.on('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" style="display: none">
<i class=""></i>
Pause
</span>
</button> <button id="btnStop">Stop</button>
</div>
三、贴一份可以直接运行的demo！
demo中加入了时间插件（timeline），频谱插件（spectrogram）、光标插件（cursor）等，可自行删除，
此代码运行还需要将相应的插件从官网下载下来，再将音频存入合适位置即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link href="test.css" type="text/css" rel="stylesheet">
<script src="jquery.js"></script> //可自行下载jquery包
</head> <body>
<h1> ZX test demo Wavesurfer.js</h1>
<br/> <br/> <br/> <br/> <br/> <script src="wavesurfer.min.js"></script> //此包需要从官网下载下来，src中填入合适路径即可
<script src="wavesurfer.timeline.js"></script> //此包需要从官网下载下来，src中填入合适的路径即可
<script src="wavesurfer.cursor.js"></script> //此包需要从官网下载，直接打开插件源码，按ctrl+s 选择路径保存即可，src中填入合适的路径
<script src="wavesurfer.spectrogram.js"></script> //这几个包都一样 <div id="waveform" class="waveform"></div>
<br/>
<div id="wave-timeline" class="wave-timeline"></div>
<div class="zoom">
<!-- <input data-action="zoom" type="range" min="1" max="200" value="0" style="width: 100%" /> -->
<input data-action="zoom" type="range" min="1" max="200" value="0" />
</div>
<div id="wave-spectrogram" class="wave-spectrogram"></div>
<br/> <br/>
<div class="box">
<button id="playPause">
<span id="play">
<i class=""></i>
Play
</span> <span id="pause" style="display: none">
<i class=""></i>
Pause
</span>
</button> <button id="btnStop">Stop</button>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var wavesurfer = WaveSurfer.create({
container: '#waveform',
barHeight: 2,
cursorColor:'#ff0000',
progressColor:'#0000ff',
scrollParent:true,
height:160,
cursorWidth:2,
autoCenter:false,
fillParent:true,
hideScrollbar:false, plugins: [
WaveSurfer.timeline.create({ //timeline plugin
container: "#wave-timeline",
height: 10,
}),
WaveSurfer.cursor.create({ //cursor plugin
container:"#wave-cursor",
showTime: true,
opacity: 1,
customShowTimeStyle: {
'background-color': '#000',
color: '#fff',
padding: '2px',
'font-size': '10px'
}
}),
WaveSurfer.spectrogram.create({
wavesurfer: wavesurfer,
container: "#wave-spectrogram",
labels: true,
fftSamples:512
})
] }); //TimeLine
wavesurfer.on('ready', function () {
var timeline = Object.create(WaveSurfer.timeline); timeline.create({
wavesurfer: wavesurfer,
container: '#wave-timeline'
});
}); // load 音频
wavesurfer.load('0f35840eeddd47e6a6d0fe0971db277c.wav'); //此处添加自己的音频路径（可将音频存入前端可访问的文件夹内，避免跨域） console.log(wavesurfer.getDuration()); //test
console.log(wavesurfer.getVolume()); // test
setTimeout(function(){ //test
console.log(wavesurfer.getDuration());
},500) //Stop
btnStop.addEventListener('click', function () {
wavesurfer.stop();
});
// PlayPause
var playPause = document.querySelector('#playPause');
playPause.addEventListener('click', function() {
wavesurfer.playPause();
});
// Toggle play/pause text
wavesurfer.on('play', function() {
document.querySelector('#play').style.display = 'none';
document.querySelector('#pause').style.display = '';
});
wavesurfer.on('pause', function() {
document.querySelector('#play').style.display = '';
document.querySelector('#pause').style.display = 'none';
}); var d1 = new Date(); //test
console.log(d1.toLocaleString()); //test
console.log('test'); //test // Zoom slider
var slider = document.querySelector('[data-action="zoom"]');
slider.value = wavesurfer.params.minPxPerSec;
slider.min = wavesurfer.params.minPxPerSec;
slider.addEventListener('input', function() {
wavesurfer.zoom(Number(this.value));
}); });
</script>
</body>
</html>
四、上述代码运行效果
（水平有限，日志基本作记录本之用，欢迎指正错误，欢迎交流）