wavesurfer.js加载超大音频的性能问题

在处理音频波形图的插件中，wavesurfer提供了丰富的API，但是在处理大音频的时候，由于一次性渲染所有的canvas，导致页面卡顿。

思路：

1. 根据官方的一些解决方案去修改
2. 修改源码

• 官方在处理大音频的时候推荐后端渲染波形，然后前端可以直接去render，避免了decode阶段。

  /* peaks即为后端渲染的波形JSON文件  */
  wave.load(url, peaks) 
  

  这样处理之后，优化确实很大，但是在音频进行播放滚动的时候，CPU占用还是特别大的。
• 通过web worker处理计算
  也许是我的打开方式不对，通过webworker处理并没有改善太多
• 修改源码
  在经历了一系列的修改之后，最终还是放弃了。
• 最终建议：
  • maxCanvasWidth，这个属性，是单个canvas的长度，我设置为50000，也就是一个canvas的长度为50000px，减少了dom的数量，这个优化是我测试的时候对性能优化最好的。
  • minPxPerSec,该属性是每秒为多少px，尽量减小一下这个值

我也会时常关注wavesurfer，如果有更新，我会尽快尝试，然后更新这篇文章。

• 补充，最近又对该功能做了优化，有了新的体验：
  • 首先，加载大音频波形的时候使用后端渲染
  • 如果需要加载region尽量做到按需加载，而不是全部展示，这样的话性能会提升很多。
  • 当maxCanvasWidth设置为50000的时候，在chrome上没问题，但是在其他浏览器上会出问题（波形崩溃），所以这未必是一个好的解决方案，请慎用。