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

栏目: JavaScript · 发布时间: 5年前

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

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

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

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

能！

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

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

二、了解wavesurfer.js

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

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

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

三、显示声音波形图

引入JS：
```
<script src="https://unpkg.com/wavesurfer.js"></script>
```
如果是学习测试，可以用上面的在线地址；如果是实际开发，请下载到本地。
写入一个 <div> 容器，用来呈现波形图，例如：
```
<div id="waveform"></div>
```

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

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

用创建的 wavesurfer
去加载我们的音频资源，可以是本地mp3：
```
wavesurfer.load('../audio/zxx.mp3');
```
也可以是在线地址：
```
wavesurfer.load('//image.zhangxinxu.com/audio/zxx.mp3');
```
如果在线地址，且跨域的话，记得服务器侧设置CORS headers，否则安全限制，mp3音频资源无法解析。
此时，波形图就有了，默认颜色和样式如下：

最左侧的黑线是当前播放的进度位置线。例如，我们播放一段音频，则会下图这样：
我们还可以外加一个播放和暂停按钮，控制音频和波形图的播放和停止，方法如下：
```
wavesurfer.play();

wavesurfer.pause();
```
更多方法可以参见文档。

实例demo在哪里？

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

demo中的音频是本人亲自献声，写到这里，忍不住撸了撸自己帅气的头发，机会难得，大家不妨进去听一听我都说了啥~ 使用wavesurfer.js显示mp3 audio音频的波形图

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

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();
});

就是这么简单。