如果你想实现右图所示的波形图效果，可以借助wavesurfer.js。wavesurfer.js上手简单，扩展丰富，有多达35个可选参数，什么音频速率控制，波形图大小尺寸啊，都完全不在话下。还有好多种方法，对了，还有很多额外的插件，丰富的使用案例。
基本上，你要想对音频进行解析，显示个图形啥的，不要多想了，就wavesurfer，童叟无欺，老少皆宜，居家旅行，开发必备。
文章关键字 ‘crossOrigin’
使用wavesurfer.js显示mp3 audio音频的波形图
2018年12月9日，星期日解决canvas图片getImageData,toDataURL跨域问题
2018年02月10日，星期六对于跨域的图片，只要能够在网页中正常显示出来，就可以使用canvas的drawImage() API绘制出来。但是如果你想更进一步，通过getImageData()方法获取图片的完整的像素信息，则多半会出错。
那有没有什么办法可以解决这个问题呢？
CORS ajax跨域请求php简单完整案例一则
2018年02月9日，星期五CORS是Cross-Origin Resource Sharing的缩写，表示跨域的资源分享，不仅可以跨子域，就算域名长得完全不一样，也可以进行资源获取。
比较常见的应用之一就是Ajax跨域请求数据。
我的应用
我的应用