saysmy / flv-audio-visualization Goto Github PK

关于之前在开会的时候提出过的问题，是否可以从getByteFrequencyData看出有实际意义的数据变化。

我这边查找MDN及其他资料发现，数据原谱即真实存在的数据为时域谱，即横轴为时间，纵轴为幅度，频率由斜率(或者说周期决定)。通过傅里叶变化，可以获取其转换后的频域谱，横轴为频率，纵轴为幅度。

那么问题就是采样的问题。根据MDN显示，AnalyserNode.minDecibels表示频谱结果的最小值，AnalyserNode.maxDecibels表示频谱结果的最大值。也就是说getByteFrequencyData的结果，表示在 A - [AnalyserNode.minDecibels, AnalyserNode.maxDecibels]上幅度的变化。

最后可视化的逻辑中

let array = new Uint8Array(this.analyser.frequencyBinCount)
this.analyser.getByteFrequencyData(array)

array.length与this.analyser.frequencyBinCount相等，所以frequencyBinCount与AnalyserNode.maxDecibels - AnalyserNode.minDecibels共同决定了采样的精度，即单位长度上有表示多少赫兹的频率范围的数据量。

至此，可以了解到。我们可视化的数据步长可以直接使用array.length | frequencyBinCount，来表示实际的精度，如果需要降低可视化的步长，减少fftSize值的大小即可。当然也可以像您的代码中那样，自定义步长，但是这样就存在一部分数据没必要计算(因为我们并没有使用到)。

存在理解有误的地方，望指出。感恩~

我是按照你的思路来写的，直接
this.audio = document.createElement('audio')
this.audioCtx = new (window.AudioContext || window.webkitAudioContext)()
this.analyser = this.audioCtx.createAnalyser()
this.audioSrc = this.audioCtx.createMediaElementSource(this.audio)
...
打开查看元素 ，音乐有时会停掉，而且arry数组没变，导致动画一直卡住

你好，在工作中有这样一个需求：实现直播视频的音频可视化。请问如何利用flvjs库，如何从视频中获取音频buffer数据？