主攻帝国 全栈为辅

帝国cms后台使用savesufer.js生成大音频audio彩色频谱数据

场景描述在这之前使用wavesufer.js创建音频频谱的功能,如下图:但遇到一个比较不好的用户体验,即当音频文件没有完全下载完的情况下,频谱是显示不了的。所以就会出现如下图的一条

场景描述

在这之前使用wavesufer.js创建音频频谱的功能,如下图:

但遇到一个比较不好的用户体验,即当音频文件没有完全下载完的情况下,频谱是显示不了的。所以就会出现如下图的一条直线:

于是有了以下的解决方案,Wave加载的时候,可以加载pcm数据格式,于是利用wavesufer的exportPCM导出pcm数据格式,提供给前台网页进行加载即可。

实现的最终效果如下图:

这样前台即可以在音频没有加载完全,但频谱已经加载完了的情况下,直接渲染出这个频谱。