我正在根据麦克风实时接收的数据进行一些实验并进行一些可视化。
在这种情况下,我想创建这样的可视化: https ://online-voice-recorder.com/es/
我在下面有一个完整的 codepen 示例,请查看,但我的问题是我正在使用这个:
obj.analyser.getByteFrequencyData(obj.frequencyArray)
对于这种特殊情况,获取峰值并生成波形图是否正确?喜欢wavesurfer 库,或者我可能需要更多地了解音频或使用一些数学知识,我不知道我被卡住了。
这是我的完整代码笔示例: https ://codepen.io/davidtorroija/pen/bZXeqb
已编辑: 添加更多信息:根据 Brad 在我的示例 getByteTimeDomainData() 中更改的答案
我查看了 getByteTimeDomain 的方法,并用于创建示波器可视化。我在这个例子中改成了这个方法,它看起来不像。查看字节数组,当这里没有声音新的 Codepen 示例时,最小值为 100, 但可能是我的实现。 顺便说一句,我正在获取 ByteFrequencyArray 的最大数量,因为我不知道从那里达到峰值的正确策略是什么,也许还有其他方法可以做到这一点?下面的代码示例:
obj.analyser.getByteTimeDomainData(obj.frequencyArray)
for (var i = 0; i< obj.frequencyArray.length; i++) {
if(obj.frequencyArray[i] > max) {
max = obj.frequencyArray[i];
}
}
var freq = Math.floor(max);
obj.bars.push({
x: obj.width,
y: (obj.height / 2) - (freq / 2),
height: max,
width: 5
})
;