wavesurfer.js：
实现的效果图如下：
代码如下：
<script src="./wavesurfer.js"></script>
<div id="waveform"></div>
<script>
var wavesurfer = WaveSurfer.create({
container: '#waveform',
barWidth: 2,
barHeight: 1.2,
mediaControls: true,
});
wavesurfer.load('http://www.5imoban.net/view/demomusic/niliuchenghe.mp3');
wavesurfer.on('ready', function () {
wavesurfer.play();
});
</script>
预览地址：wavesurfer.js实现音乐播放波峰图效果参数说明：
| 参数 | 默认值 | 说明 |
|---|---|---|
| audioRate | 1 | 音频的播放速度，数值越小越慢 |
| barWidth | none | 如果设置，波纹的样式将变成类似柱状图的形状 |
| barHeight | 1 | 波纹柱状图的高度，当大于1的时候，将增加设置的高度 |
| barGap | none | 波纹柱状图之间的间距 |
| container | none | 必填参数，指定渲染的dom的id名、类名或者dom本身 |
| cursorColor | none | 鼠标点击的颜色 |
| cursorWidth | 1 | 鼠标点击显示的宽度 |
| height | 128 | 音频的显示高度 |
| hideScrollbar | false | 当出现横坐标的时候，设置是否显示 |
| mediaType | audio | 音频的类型，支持video |
| plugins | [] | 使用的插件 |
| progressColor | #555 | 光标后面的波形部分的填充颜色 |
| waveColor | #555 | 光标后面的波形的填充颜色 |
| xhr | {} | 额外的请求XHR参数 |
下载地址：http://www.5imoban.net/view/js/musicWave/wavesurfer/wavesurfer.js
官方网站：https://wavesurfer-js.org/
WFPlayer.js：
实现的效果图如下：
预览地址：wfplayer.js实现音乐播放波峰图效果
代码如下：
<div id="waveform" style="width: 1000px; height: 300px"></div>
<audio id="audio" src="http://www.5imoban.net/view/demomusic/niliuchenghe.mp3" controls=""></audio>
<script src="wfplayer.js"></script>
<script>
var wf = new WFPlayer({
container: document.querySelector('#waveform'),
// Media element like: video tag or audio tag
mediaElement: null,
// Whether to display wave
wave: true,
// Waveform color
waveColor: 'rgba(244, 67, 54, 1)',
// Background color
backgroundColor: 'rgb(28, 32, 34)',
// Whether to display cursor
cursor: true,
// Cursor color
cursorColor: '#ff0000',
// Whether to display progress
progress: true,
// progress color
progressColor: 'rgba(255, 255, 255, 0.5)',
// Whether to display grid
grid: true,
// Grid color
gridColor: 'rgba(255, 255, 255, 0.05)',
// Whether to display ruler
ruler: true,
// Ruler color
rulerColor: 'rgba(255, 255, 255, 0.5)',
// Whether to display ruler at the top
rulerAtTop: true,
// Indicates whether to do http fetching with cookies
withCredentials: false,
// Indicates whether to enable CORS for http fetching
cors: false,
// Initialize http headers
headers: {},
// Pixel ratio
pixelRatio: window.devicePixelRatio,
// Which audio channel to render
channel: 0,
// Duration of rendering
duration: 10,
// The ratio of spaces on both sides
padding: 5,
// Waveform height scale ratio
waveScale: 0.8,
});
wf.load(document.querySelector('#audio'));
</script>
下载地址：http://www.5imoban.net/view/js/musicWave/wfplayer/wfplayer.js官方网站：https://wfplayer.js.org/