因此,我可以使用这些信息来协调页面动画,就像分贝级别越高,使元素更亮
解决方法
这种方法适用于Chrome / Safari：
+function(){
var ctx = new AudioContext(),url = 'https://cf-media.sndcdn.com/OfjMZo27DlvH.128.mp3?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiKjovL2NmLW1lZGlhLnNuZGNkbi5jb20vT2ZqTVpvMjdEbHZILjEyOC5tcDMiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE1MTUwNDM5Njd9fX1dfQ__&Signature=FfmL2qUssAKs3Z7EPoYo0Yq8-SAg8rKLPs65EasXwuVkfsOB4joFqeCvVR2elpaG-lJaV4hXpXFiRCDWXNOYyAtO4Oz~sexiPwIoSk8-jWiVbGQRS8TMmUmj7TJzxemMOIj7ugWJKk6PHsrUdgqs9woDpHzxmkGCzk6sfqJEIsdeZJ4rWUFAh4iGWn9M6b0xfzTgndAJmytkNj9raCpWCBVmdr5u-r9nt~q5uF1easNSW9oaFilM4s1Hq2ei~VJye8zW9bzvrGm8idVdy-tiPeMWAKcE8J2VuaS1Ret6jRTRaHTDuiNgA5sZvgTzNpEpKtWI7UmAWI5TrqNVSlxpgQ__&Key-Pair-Id=APKAJAGZ7VMH2PFPW6UQ',audio = new Audio(url)
// 2048 sample buffer,1 channel in,1 channel out,processor = ctx.createScriptProcessor(2048,1,1),meter = document.getElementById('meter'),source
audio.crossOrigin = 'anonymous'
audio.addEventListener('canplaythrough',function(){
source = ctx.createMediaElementSource(audio)
source.connect(processor)
source.connect(ctx.destination)
processor.connect(ctx.destination)
audio.play()
},false);
// loop through PCM data and calculate average
// volume for a given 2048 sample buffer
processor.onaudioprocess = function(evt){
var input = evt.inputBuffer.getChannelData(0),len = input.length,total = i = 0,rms
while ( i < len ) total += Math.abs( input[i++] )
rms = Math.sqrt( total / len )
meter.style.width = ( rms * 100 ) + '%'
}
}()
#meter {
width: 0%;
height: 15px;
margin: 2px 0;
background: green;
-webkit-transition: width .05s;
}
<div id="meter"></div>
重要的事情发生在这里：
processor.onaudioprocess = function(evt){ var input = evt.inputBuffer.getChannelData(0),rms while ( i < len ) total += Math.abs( input[i++] ) rms = Math.sqrt( total / len ) meter.style.width = ( rms * 100 ) + '%' }
基本上,您每2048个样本获取原始PCM数据(值从-1到1),然后循环遍历它们,计算给定时间段内的平均信号电平.
然后,您可以使用该值来制作动画.
编辑：更新为使用RMS,正如Jason所指出的那样是一个更有意义的测量.
