使用wavesurfer.js显示mp3 audio音频的波形图

byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8290

本文可全文转载，个人网站无需授权，只要保留原作者、出处以及文中链接即可，任何网站均可摘要聚合，商用请联系授权。

一、能不能开头不要废话？

能！

如果你想实现下图所示的波形图效果，可以借助wavesurfer.js。

二、了解wavesurfer.js

wavesurfer.js项目地址： https://github.com/katspaugh/wavesurfer.js

官网地址： http://wavesurfer-js.org/

要想实现一个音频的波形效果，很简单，按照下面的步骤来就好了！

三、显示声音波形图

1. 引入JS：

   <script src="https://unpkg.com/wavesurfer.js"></script>

   如果是学习测试，可以用上面的在线地址；如果是实际开发，请下载到本地。

2. 写入一个 <div> 容器，用来呈现波形图，例如：

   <div id="waveform"></div>

3. 使用全局的 WaveSurfer 对象创建一个实例：

   var wavesurfer = WaveSurfer.create({
       container: '#waveform'
   });

4. 用创建的 wavesurfer

   去加载我们的音频资源，可以是本地mp3：

   wavesurfer.load('../audio/zxx.mp3');

   也可以是在线地址：

   wavesurfer.load('//image.zhangxinxu.com/audio/zxx.mp3');

   如果在线地址，且跨域的话，记得服务器侧设置CORS headers，否则安全限制，mp3音频资源无法解析。

5. 此时，波形图就有了，默认颜色和样式如下：

   

   最左侧的黑线是当前播放的进度位置线。例如，我们播放一段音频，则会下图这样：

   

6. 我们还可以外加一个播放和暂停按钮，控制音频和波形图的播放和停止，方法如下：

   wavesurfer.play();
   
   wavesurfer.pause();

   更多方法可以参见 文档 。

实例demo在哪里？

在这里！您可以狠狠地点击这里： 使用JS显示Mp3音频的波形图demo

demo中的音频是本人亲自献声，写到这里，忍不住撸了撸自己帅气的头发，机会难得，大家不妨进去听一听我都说了啥~

demo页面HTML如下：

<div id="waveform" class="waveform"></div>
<a href="javascript:" id="btnPlay" role="button">播放</a>
<a href="javascript:" id="btnPause" role="button">暂停</a>

JS代码如下：

var wavesurfer = WaveSurfer.create({
    container: '#waveform'
});
wavesurfer.load('./zxx-comic-01.mp3');
// 播放和暂停
btnPlay.addEventListener('click', function () {
    wavesurfer.play();
});
btnPause.addEventListener('click', function () {
    wavesurfer.pause();
});

就是这么简单。

四、想要更复杂的交互显示？

没问题。

wavesurfer有多达35个 可选参数 ，什么音频速率控制，波形图大小尺寸啊，都完全不在话下。

还有好多种方法，对了，还有很多其他的插件，丰富的使用案例。

基本上，你要想对音频进行解析，显示个图形啥的，不要多想了，就wavesurfer，童叟无欺，老少皆宜，居家旅行，开发必备。

自己去探索吧，我就不远送了！

五、结束说点啥没关系吧

网站换独立云后，越来越慢，看访问统计没多少增加呀~

于是今天打算看看日志。

嘛呀，我一看日志文件，9个多G，整个人都斯巴达了，读写一个9个多G的txt，再怎么样，也会越来越慢的呀。而且这么大，根本看不了日志。

所以，就吭哧吭哧改成每天一个独立的日志文件。

谁知才改好没多久，日志文件已经有10M多了，我这一琢磨，不对呀，这周末顶多几千人过来看看文章，怎么会有这么多请求呢？

我就一分析，整个人都斯巴达了，怎么有这么多外站直接请求我网站的JS呢，我做demo写插件给大家用，不是让大家直接链接JS文件的呀~

为了让大家意识到链接外部网站的一个JS文件是多么危险的事情。

嘿嘿，我给几个调用比较频繁的JS加了个隐蔽的很坏的处理，特定场景下才会触发的一个新开标签页行为，具体细节我就不透露了。

总之，大家以后开发上线，一定不要外链外部的JS资源，用户信息泄露是小，财产损失那可就不好玩了。

好，就说这么多，拜拜，下篇文章再见！

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。

本文地址： https://www.zhangxinxu.com/wordpress/?p=8290

（本篇完）