WFPlayer.js 一个简单的音频波形图生成器

[zhw2590582]

就是做上面这种效果图的，感觉用到的人也不多，主要是之前做的一个 SubPlayer 在线字幕编辑器 需要用到音频波形图做参考，但找不到合适的插件所以就自己实现了一个，可能有些同学以后说不定会用到这种效果。因为是纯前端解码，大文件的话可能会有点卡顿。

• 无需加载整个文件就可以渐进式生成波形图
• 只要能看到的都可以实时更改颜色、是否展示和尺寸参数
• 支持连接到媒体 DOM 元素如video、audio实现播放动画
• 自适应父元素尺寸

网址：https://wfplayer.js.org

Github: https://github.com/zhw2590582/WFPlayer

[wangxiaoaer]

很有意思，能解释下原理吗？

[zhw2590582]

@wangxiaoaer 源码不多，大概看一遍应该也不会花太多时间，遇到不理解可以问我哈

[wangxiaoaer]

多谢，原理是 AudioContext 这个 API，之前不知道。

[cydian]

手机上传 mp3 会显示 不支持该格式
chrome

[zhw2590582]

@cydian 因为 demo 演示的是视频，播放 mp3 的话可以用 <audio> 标签