一、简介

　　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. Ambari自定义Service

    一.Ambari基本架构   img016.jpg Ambari Server 会读取 Stack 和 Service 的配置文件.当用 Ambari 创建服务的时候,Ambari Server 传送 ...

  2. 在word中如何美观地插入代码

    打开这个网站 http://www.planetb.ca/syntax-highlight-word 进去后我们看到下面的界面 中间的空白文本框,可以插入代码,下面可以选择代码种类,最后点击Show ...

  3. SpringCloud警告(Eureka)：EMERGENCY! EUREKA MAY BE INCORRECTLY CLAIMING INSTANCES ARE UP WHEN THEY'RE NOT. RENEWALS ARE LESSER THAN THRESHOLD AND HENCE THE INSTANCES ARE NOT BEING EXPIRED JUST TO BE SAFE.

    警告!Eureka可能存在维护了错误的实例列表(当它们没有启动的时候,Eureka却把它当成启动的了):Renews值小于Threshold值,因此剩下未过期的都是安全的. 原因分析: 这个是Eure ...

  4. 从零开始学习和改造activiti流程引擎的13天，自己记录一下

    day#1(11.13) 尝试通过spring boot 集成最新版activiti 7,但是苦于官方的文档基本为空,无法完成spring boot的配置,最终按照activiti 6的文档,手工初始 ...

  5. Adobe系列产品卸载不干净怎么解决

    相信很多朋友都遇到过Adobe系列的产品卸载不干净这种问题,究竟如何来解决这个难题呢? Adobe产品在安装的过程中都会自带卸载程序,因此,小编建议各位不要用其他的卸载清理软件来卸载,这样往往会导致卸 ...

  6. .NET Core TDD 前传: 编写易于测试的代码 -- 缝

    有时候不是我们不想做单元测试, 而是这代码写的实在是没法测试.... 举个例子, 如果一辆汽车在产出后没完成测试, 那么没人敢去驾驶它. 代码也是一样的, 如果项目未能进行该做的测试, 那么客户就不敢 ...

  7. 2.Flask jinjia2模板

    1.1.模板传参 (1)主程序 from flask import Flask,render_template app = Flask(__name__) @app.route('/') def he ...

  8. 过程 sp_addextendedproperty， 对象无效。不允许有扩展属性，或对象不存在。

    过程 sp_addextendedproperty, 对象无效.不允许有扩展属性,或对象不存在. 首先这个是创建数据表的SQL,有Power Designer创建模型,直接生成的创建SQL会出现的问题 ...

  9. 接口测试---Python数据处理需要注意的细节

    一.json模块中的dumps方法 请求接口时params肯定是dict类型的,就是这种{"A":"B"},因为需要传json格式的参数到服务端,但是为了降低c ...

  10. [翻译] 对正在使用EF6x开发人员的一些话

    Entity Framework Core in Action Entityframework Core in action是 Jon P smith 所著的关于Entityframework Cor ...