一、简介

　　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绘制音频波形图小白极速上手总结的更多相关文章

  1. C# NAudio录音和播放音频文件-实时绘制音频波形图（从音频流数据获取，而非设备获取）

    NAudio的录音和播放录音都有对应的类,我在使用Wav格式进行录音和播放录音时使用的类时WaveIn和WaveOut,这两个类是对功能的回调和一些事件触发. 在WaveIn和WaveOut之外还有对 ...

  2. C# NAudio录音和播放音频文件及实时绘制音频波形图（从音频流数据获取，而非设备获取）

    下午写了一篇关于NAudio的录音.播放和波形图的博客,不太满意,感觉写的太乱,又总结了下 NAudio是个相对成熟.开源的C#音频开发工具,它包含录音.播放录音.格式转换.混音调整等功能.本次介绍主 ...

  3. 基于wavesurfer.js的超大音频的渐进式请求实现

    最近在对超大音频的渐进式请求实现上面消耗了不少时间,主要是因为一对音频的基本原理不太理解,二刚开始的时候太依赖插件,三网上这块的资料找不到只能靠自己摸索.由于交互复杂加上坑比较多,我怕描述不清,这里主 ...

  4. Wavesurfer.js音频播放器插件的使用教程

    Wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件,本文主要记录它及其视觉效果插件Regions插件的使用方法. 1.创建实例 引入插件 import W ...

  5. vue解决音频可视化播放，使用wavesurfer.js

    vue解决音频可视化播放,使用wavesurfer.js 上效果:   1.安装wavesurfer  npm install wavesurfer.js 2.在页面导入 import WaveSur ...

  6. ios 绘制wav波形图

    最近研究了如何在iOS上绘制wav波形图.查了很多资料,都没能找到一个很完整的介绍,我这里总结一下一些经验. 首先需要了解wav的这3个重要指标:采样率.采样位数.声道数.下面以16KHz, 16Bi ...

  7. 利用d3.js绘制雷达图

    利用d3,js将数据可视化,能够做到数据与代码的分离.方便以后改动数据. 这次利用d3.js绘制了一个五维的雷达图.即将多个对象的五种属性在一张图上对照. 数据写入data.csv.数据类型写入typ ...

  8. js 绘制数学函数

    <!-- <!doctype html> --> <html lang="en"> <head> <meta charset= ...

  9. JS控制音频顺序播放

    做一项目,用到“叫号功能”,网页上有一“叫号”按钮,点击后就读数据库中存的号码,如123号, 然后就发声音出来, 思路是网上下载0123456789的叫号声音,然后按钮点击事件里就在JS里写用那个HT ...

随机推荐

  1. 从一个git仓库拷贝到另一个git仓库

    利用git从一个仓库拷贝一个项目到另一个仓库,并且log也能够一起过去. 1.从原地址克隆一份裸版本库,比如原本托管于 GitHub. git clone --bare http://github.. ...

  2. 关于ORACLE的SQL语句拼接、替换、截取、排序，联表等...~持续汇总~

     先看一下所有的数据.这里全部为VARCHAR2(255). 字段拼接 在所有的性别后面加% 字段替换,把性别TPF_SEX去除百分号% 字段截取 字段截取+拼接 字段替换,这里把百分号%替换为空,也 ...

  3. PowerShell禁止执行脚本解决方法

    无法加载文件 C:\***.p s1,因为在此系统中禁止执行脚本.有关详细信息,请参阅 "get-help about_signing". 所在位置 行:1 字符: 18 + .\ ...

  4. 002_Python多线程相当于单核多线程的论证

    很多人都说python多线程是假的多线程!下面进行论证解释: 一. 我们先明确一个概念,全局解释器锁(GIL) Python代码的执行由Python虚拟机(解释器)来控制.Python在设计之初就考虑 ...

  5. 微信小程序去除Button默认样式

    在小程序开发过程中,使用率蛮高的组件button,因为经常要去除默认样式,然后再自定义样式,所以经常写,自己也总结分享一下简单的实现步骤. (一)实现效果1.实现前(默认样式): 2.实现后(去除默认 ...

  6. Java　Main参数解析(Args4j)

    最近实现一个工具,Main函数会有很多参数,而且参数类型不同,为了统一解析,网上找到三方工具类Args4j,轻松搞定. 代码实例如下: 定义解析类: import java.io.File impor ...

  7. Ubuntu 安装php+mysql+nginx

    0x01 安装PHP https://blog.csdn.net/Msmile_my/article/details/73647809   1.添加php的仓库 sudo apt-get instal ...

  8. 读Cassandra源码之并发

    java 并发与线程池 java并发包使用Executor框架来进行线程的管理,Executor将任务的提交与执行过程分开,直接使用Runnable表示任务.future获取返回值.ExecutorS ...

  9. IDLE打开Python报错 api-ms-win-crt-runtimel1-1-0.dll缺失的解决方案

    1.此方法转载至 http://blog.csdn.net/lt_java13/article/details/78814676 2.把C:\Windows\SysWOW64的api-ms-win-c ...

  10. javaScript设计模式之面向对象编程（object-oriented programming，OOP）--寄生组合式继承

    组合式继承:将类式继承同构造函数继承组合使用,但是存在一个问题,子类不是父类的实例,而子类的原型式父类的实例,所以才有了寄生组合式继承. 意思就是说,寄生就是寄生式继承,寄生式继承就是依托于原型继承, ...