Javascript 使用wavesurfer.js设置CSS属性的动画

非常适合从音频文件渲染波形，但我想知道是否可以将任何CSS属性设置为wavesurfer.js生成的波形/摄谱仪的振幅/频率？是否有一种变量可以分配给另一个参数（例如：一个

的不透明度）？

查看wavesurfer.js，可以使用

wavesurfer.backend.analyzer

获得

注意：您必须检查

Analyzer

是否是

AnalyzerNode

的实例。只有在浏览器支持的情况下才会出现这种情况

从

AnalyserNode

可以获取属性，然后可以开始

我在他们的网站上做了一个简单的例子（）

var wavesurfer=wavesurfer.create({
容器：“#波形”，
waveColor:“#5B88C8”，
progressColor:“#264E73”
});
wavesurfer.load（'https://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3');
//从wavesurfer获取Analyzer节点
//@看https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode
var分析仪=wavesurfer.backend.Analyzer，
//数组来存储频率数据
//@看https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode/getByteFrequencyData
frequencyData=新的UINT8阵列（分析仪.frequencyBinCount），
//设置动画和播放/暂停按钮的div
box=document.getElementById（'box'），
play=document.getElementById（'play'）；
//播放按钮-播放暂停音频
play.addEventListener（'click'，function（）{
wavesurfer.playPause（）；
});
//wavesurfer“audioprocess”事件在音频播放时持续激发@see events on wave surferhttp://wavesurfer-js.org/docs/events.html
wavesurfer.on（'audioprocess'，函数（e）{
分析仪。GetByTefFrequencyData（频率数据）；
//console.log（频率数据）；
//简单示例-获取数组中的第一个值并设置框的宽度
var w=频率数据[0]*0.05；
//应用比例变换；
box.style.transform='scale（'+w+'，1'）；
});
/*添加一些转换*/
.动画{
保证金：50px自动；
宽度：50px；
高度：50px；
背景色：#71C2D0；
转换：转换0.1s缓解；
}

播放
非常感谢！虽然我还不了解每一个细节，但我已经设法调整了你的代码来设置图像不透明度的动画，但是我在使用它来设置CSS3过滤器属性的动画时遇到了问题。太好了，你应该能够像其他css属性一样设置过滤器的动画，例如：transition:filter 0.5s linear；如果您想使用javascript来实现这一点，那么这可能会有所帮助