应用wavesurfer.js绘制音频波形图小白极速上手总结
一、简介
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>
四、上述代码运行效果
（水平有限，日志基本作记录本之用，欢迎指正错误，欢迎交流）
应用wavesurfer.js绘制音频波形图小白极速上手总结的更多相关文章
- C# NAudio录音和播放音频文件-实时绘制音频波形图（从音频流数据获取，而非设备获取）
NAudio的录音和播放录音都有对应的类,我在使用Wav格式进行录音和播放录音时使用的类时WaveIn和WaveOut,这两个类是对功能的回调和一些事件触发. 在WaveIn和WaveOut之外还有对 ...
- C# NAudio录音和播放音频文件及实时绘制音频波形图（从音频流数据获取，而非设备获取）
下午写了一篇关于NAudio的录音.播放和波形图的博客,不太满意,感觉写的太乱,又总结了下 NAudio是个相对成熟.开源的C#音频开发工具,它包含录音.播放录音.格式转换.混音调整等功能.本次介绍主 ...
- 基于wavesurfer.js的超大音频的渐进式请求实现
最近在对超大音频的渐进式请求实现上面消耗了不少时间,主要是因为一对音频的基本原理不太理解,二刚开始的时候太依赖插件,三网上这块的资料找不到只能靠自己摸索.由于交互复杂加上坑比较多,我怕描述不清,这里主 ...
- Wavesurfer.js音频播放器插件的使用教程
Wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件,本文主要记录它及其视觉效果插件Regions插件的使用方法. 1.创建实例 引入插件 import W ...
- vue解决音频可视化播放，使用wavesurfer.js
vue解决音频可视化播放,使用wavesurfer.js 上效果: 1.安装wavesurfer npm install wavesurfer.js 2.在页面导入 import WaveSur ...
- ios 绘制wav波形图
最近研究了如何在iOS上绘制wav波形图.查了很多资料,都没能找到一个很完整的介绍,我这里总结一下一些经验. 首先需要了解wav的这3个重要指标:采样率.采样位数.声道数.下面以16KHz, 16Bi ...
- 利用d3.js绘制雷达图
利用d3,js将数据可视化,能够做到数据与代码的分离.方便以后改动数据. 这次利用d3.js绘制了一个五维的雷达图.即将多个对象的五种属性在一张图上对照. 数据写入data.csv.数据类型写入typ ...
- js 绘制数学函数
<!-- <!doctype html> --> <html lang="en"> <head> <meta charset= ...
- JS控制音频顺序播放
做一项目,用到“叫号功能”,网页上有一“叫号”按钮,点击后就读数据库中存的号码,如123号, 然后就发声音出来, 思路是网上下载0123456789的叫号声音,然后按钮点击事件里就在JS里写用那个HT ...
随机推荐
- Android 开发者必知必会的权限管理知识
本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/OQRHEufCUXBA3d3DMZXMKQ 导语 本 ...
- 467. [leetcode] Unique Substrings in Wraparound String
467. Unique Substrings in Wraparound String Implement atoi to convert a string to an integer. Hint: ...
- 【死磕 Spring】----- IOC 之 获取验证模型
原文出自:http://cmsblogs.com 在上篇博客[死磕Spring]----- IOC 之 加载 Bean 中提到,在核心逻辑方法 doLoadBeanDefinitions()中主要是做 ...
- 微软跨平台ORM框架之EFCore — 约定与属性映射
EFCore中的约定简单来说就是规则,CodeFirst基于模型的约定来映射表结构.除此之外还有Fluent API.Data Annotations(数据注释) 可以帮助我们进一步配置模型. 按照这 ...
- 5. VIM 系列 - 文件管理
目录 目录树 文件检索 ctrlp.vim fzf.vim 目录树 安装 nerdtree.vim 插件 Plug 'scrooloose/nerdtree', { 'on': 'NERDTreeTo ...
- 安装Adobe时出现Adobe Application Manager丢失或损坏解决方法
很多朋友在安装Adobe系列产品时出现Adobe Application Manager丢失或损坏,这是由于上次安装的Adobe产品没有正确卸载,导致这次安装失败.那么如何解决这一问题呢? 1.下载安 ...
- 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之三 || Swagger的使用 3.1
常见问题 1.经常有小伙伴遇到这个错误 这是因为接口json文档定义和调用不是一个 1.定义: ConfigureServices 方法中的 services.AddSwaggerGen 注册的一个 ...
- 安装window下的redis，redis可视化管理工具（Redis Desktop Manager）安装，基础使用，实例化项目
以下包括内容: 一.redis下载安装,启动 二.Redis可视化管理工具(Redis Desktop Manager)安装 三.实例化项目 一.redis下载安装,启动 1,redis官方下载地址: ...
- org.apache.ibatis.builder.IncompleteElementException: Could not find result map java.lang.Integer
如图: 详细错误信息如下: org.apache.ibatis.builder.IncompleteElementException: Could not find result map java.l ...
- 一套代码小程序&Web&Native运行的探索04——数据更新
接上文:一套代码小程序&Web&Native运行的探索03 对应Git代码地址请见:https://github.com/yexiaochai/wxdemo/tree/master/m ...