一、簡介
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）等，可自行刪除，
此代碼運行還需要將相應的插件從官網下載下來，再將音頻存入合適位置即可
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" style="width: 100%" /> --> 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" style="display: none"> 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() { 46 var wavesurfer = WaveSurfer.create({ 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 WaveSurfer.timeline.create({ //timeline plugin 61 container: "#wave-timeline", 62 height: 10, 63 }), 64 WaveSurfer.cursor.create({ //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 WaveSurfer.spectrogram.create({ 76 wavesurfer: wavesurfer, 77 container: "#wave-spectrogram", 78 labels: true, 79 fftSamples:512 80 }) 81 ] 82 83 84 }); 85 86 //TimeLine 87 wavesurfer.on('ready', function () { 88 var timeline = Object.create(WaveSurfer.timeline); 89 90 timeline.create({ 91 wavesurfer: wavesurfer, 92 container: '#wave-timeline' 93 }); 94 }); 95 96 // load 音頻 97 wavesurfer.load('0f35840eeddd47e6a6d0fe0971db277c.wav'); //此處添加自己的音頻路徑（可將音頻存入前端可訪問的文件夾內，避免跨域） 98 99 console.log(wavesurfer.getDuration()); //test 100 console.log(wavesurfer.getVolume()); // test 101 setTimeout(function(){ //test 102 console.log(wavesurfer.getDuration()); 103 },500) 104 105 //Stop 106 btnStop.addEventListener('click', function () { 107 wavesurfer.stop(); 108 }); 109 // PlayPause 110 var playPause = document.querySelector('#playPause'); 111 playPause.addEventListener('click', function() { 112 wavesurfer.playPause(); 113 }); 114 // Toggle play/pause text 115 wavesurfer.on('play', function() { 116 document.querySelector('#play').style.display = 'none'; 117 document.querySelector('#pause').style.display = ''; 118 }); 119 wavesurfer.on('pause', function() { 120 document.querySelector('#play').style.display = ''; 121 document.querySelector('#pause').style.display = 'none'; 122 }); 123 124 var d1 = new Date(); //test 125 console.log(d1.toLocaleString()); //test 126 console.log('test'); //test 127 128 // Zoom slider 129 var slider = document.querySelector('[data-action="zoom"]'); 130 slider.value = wavesurfer.params.minPxPerSec; 131 slider.min = wavesurfer.params.minPxPerSec; 132 slider.addEventListener('input', function() { 133 wavesurfer.zoom(Number(this.value)); 134 }); 135 136 }); 137 </script> 138 </body> 139 </html>
四、上述代碼運行效果
（水平有限，日志基本作記錄本之用，歡迎指正錯誤，歡迎交流）