四款js声波音频可视化效果
通过js将声音可视化的方式有四种，每种方式实现的效果不一样，强力推荐p5与shader，很强悍。
一、AudioContext方式
通过AudioContext来实现
var AudCtx = new AudioContext(); //音频内容 var src = AudCtx.createMediaElementSource(audio); var analyser = AudCtx.createAnalyser(); src.connect(analyser); analyser.connect(AudCtx.destination); analyser.fftSize = 128; //快速傅里叶变换, 必须为2的N次方 var bufferLength = analyser.frequencyBinCount; // = fftSize * 0.5
打开webide修改代码http://studio.bfw.wiki/Studio/Open/id/15832890572989400098.html
二、wavesurfer.js实现
通过插件wavesurfer.js
在线webide地址:http://studio.bfw.wiki/Studio/Open/id/15832890572989400098.html
三、p5.sound实现效果
p5,sound.js是专门针对声音可视化处理这一块发布的插件，很方便。
在线webide地址 http://studio.bfw.wiki/Studio/Open/id/15833224842118310084.html
四、shader-doodle实现
通过shader-doodle可实现更加复杂的变换效果，画面更好看，与音乐更合拍。
webide地址 http://studio.bfw.wiki/Studio/Open/id/15832795903713820087.html
{{collectdata}}
网友评论0