by zhangxinxu from /wordpress/?p=8290
本文可全文转载，个人网站无需授权，只要保留原作者、出处以及文中链接即可，任何网站均可摘要聚合，商用请联系授权。
一、能不能开头不要废话？
能！
如果你想实现下图所示的波形图效果，可以借助wavesurfer.js。
二、了解wavesurfer.js
要想实现一个音频的波形效果，很简单，按照下面的步骤来就好了！
三、显示声音波形图
引入JS：
如果是学习测试，可以用上面的在线地址；如果是实际开发，请下载到本地。
写入一个
容器，用来呈现波形图，例如：
使用全局的WaveSurfer对象创建一个实例：
var wavesurfer = WaveSurfer.create({
container: '#waveform'
});
用创建的wavesurfer去加载我们的音频资源，可以是本地mp3：
wavesurfer.load('../audio/zxx.mp3');
也可以是在线地址：
wavesurfer.load('///audio/zxx.mp3');
如果在线地址，且跨域的话，记得服务器侧设置CORS headers，否则安全限制，mp3音频资源无法解析。
此时，波形图就有了，默认颜色和样式如下：
最左侧的黑线是当前播放的进度位置线。例如，我们播放一段音频，则会下图这样：
我们还可以外加一个播放和暂停按钮，控制音频和波形图的播放和停止，方法如下：
wavesurfer.play();
wavesurfer.pause();
更多方法可以参见文档。
实例demo在哪里？
demo中的音频是本人亲自献声，写到这里，忍不住撸了撸自己帅气的头发，机会难得，大家不妨进去听一听我都说了啥~
demo页面HTML如下：
播放
暂停
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资源，用户信息泄露是小，财产损失那可就不好玩了。
好，就说这么多，拜拜，下篇文章再见！
本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：/wordpress/?p=8290
(本篇完)
