将频率均匀分布到画布音频分析仪

Evenly distribute frequencies to canvas audio frequency analyzer

本文关键字：音频 分析仪 布音频 频率 分布      更新时间：2023-09-26

我有这个分析器(来自教程(：

var playerE = document.getElementsByClassName('player')[0];;
var analyser = document.getElementById('analyzer');
var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height;
window.addEventListener("load", playAnalyzer, false);
function playAnalyzer() {
    context = new AudioContext();
    analyser = context.createAnalyser();
    canvas = document.getElementById('analyzer');
    ctx = canvas.getContext('2d');
    source = context.createMediaElementSource(playerE);
    source.connect(analyser);
    analyser.connect(context.destination);
    frameLooper();
}
function frameLooper() {
    canvas.width  = 800;
    canvas.height = 400;
    ctx.imageSmoothingEnabled = false;
    window.requestAnimationFrame(frameLooper);
    fbc_array = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(fbc_array);
    ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
    ctx.fillStyle = "white"; // Color of the bars
    bars = 700;
    for (var i = 0; i < bars; i++) {
        bar_x = i * 5;
        bar_width = 3;
        bar_height = -(fbc_array[i] / 2);
        ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
    }
}

现在它工作得很好，我面临的唯一问题是频率。由于它根据每个频率添加条形，因此当条形的宽度和间距大于 1 时，更高的频率将被排除在外。如何将频率均匀分布到设置的柱数(柱=700(？

我还想知道除了频率音量之外，如何增加 2px 的高度？(这样分析仪就不会在没有任何声音时消失(

我自己发现，这是方法。

由于 for 循环考虑了每个频率，因此只需在每个循环中跳过 4 个小节。这样：

for (var i = 0; i < bars; i += 4) /*<-- Adding 4 instead of 1*/ {
        bar_x = i * 1;
        bar_width = 3;
        bar_height = -3 - (fbc_array[i] / 2);
        ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
    }

您必须调整条的数量、宽度和 x。为了偏移条形上的高度，只需从"条形高度"中减去任何值，如图所示。在这个例子中，我减去 3

。

就是这样！

相关文章：