Question

我正在使用Web API创建一个音频条形可视化器，我希望这些条形仅显示~40Hz到~10kHz。我发现的唯一的事情是频域，但这并没有为我提供我正在寻找的东西（AnalyserNode.fftSize）。有没有办法只显示这个频率？这是我的代码：

.controller('PlayerCtrl', function(PlayerService, $scope){
        $scope.title = PlayerService.songName;
        $scope.art = PlayerService.songArt;
        $scope.url = PlayerService.songUrl + '?client_id=54970813fe2081a104a874f0f870bcfe';

        if (! window.AudioContext) {
            if (! window.webkitAudioContext) {
                alert('no audiocontext found, update your browser yo');
            }
            window.AudioContext = window.webkitAudioContext;
        }
        var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        var analyser = audioCtx.createAnalyser();
        analyser.minDecibels = -60;
        analyser.maxDecibels = 0;
        analyser.smoothingTimeConstant = 0.85;

        var audioBuffer;
        var sourceNode;
        var javascriptNode;

        var canvas = document.querySelector('.visualizer');
        var canvasCtx = canvas.getContext("2d");

        var intendedWidth = document.querySelector('.now-playing').clientWidth;

        canvas.setAttribute('width',intendedWidth);

        var visualSelect = document.getElementById("visual");

        var drawVisual;

        setupAudioNodes();
        loadSound($scope.url); //music file

        function loadSound(url) {
            var request = new XMLHttpRequest();
            request.open('GET', url, true);
            request.responseType = 'arraybuffer';

            request.onload = function() {
                audioCtx.decodeAudioData(request.response, function(buffer) {
                    playSound(buffer);
                }, function(error){
                    console.log(error)
                });
            };
            request.send();
        }

        function playSound(buffer) {
            sourceNode.buffer = buffer;
            sourceNode.start(0);
            $(".content").show();
            $("#hue").hide();
        }


        function setupAudioNodes() {
            console.log('audio nodes')
            javascriptNode = audioCtx.createScriptProcessor(2048, 1, 1);
            javascriptNode.connect(audioCtx.destination);

            sourceNode = audioCtx.createBufferSource();
            sourceNode.connect(analyser);
            analyser.connect(javascriptNode);

            sourceNode.connect(audioCtx.destination);

            visualize();
        }

        function visualize() {
            console.log('viz');
            WIDTH = canvas.width;
            HEIGHT = canvas.height;

            analyser.fftSize = 64;
            var bufferLength = analyser.frequencyBinCount;
            console.log(bufferLength);
            var dataArray = new Uint8Array(bufferLength);

            canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);

            function draw() {
                drawVisual = requestAnimationFrame(draw);

                analyser.getByteFrequencyData(dataArray);

                canvasCtx.fillStyle = 'rgb(0, 0, 0)';
                canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);

                var barWidth = (WIDTH / bufferLength) * 2.5;
                var barHeight;
                var x = 0;

                for (var i = 0; i < bufferLength; i++) {
                    barHeight = dataArray[i];

                    canvasCtx.fillStyle = 'rgb(' + (barHeight + 100) + ',50,50)';
                    canvasCtx.fillRect(i*17, HEIGHT - barHeight / 2, 10, barHeight);

                    x += barWidth + 1;
                }
            }
            draw()
        }

    })

Answer 1

只是不要使用分析仪计算的较高频率。执行此操作的简单方法是将bufferLength设置为比analyser.frequencyBinCount更小的值。分析器将为您提供尽可能多的数据，然后放弃其余数据。

这些分档的均匀间隔为0到采样率的一半，因此在典型的采样率（44kHz）下，您可能需要大约一半的分档。更一般地说，Math.ceil(analyser.frequencyBinCount * 10000 / (audioCtx.sampleRate / 2))应该为您提供所需的数字。

Answer 2

您需要计算频率分辨率：sampleRate / fftSize。这将为您提供getByteFrequencyData给您提供的每个数字的频率范围。当然，如果您依赖默认的sampleRate，则很难知道该比率。这样覆盖它：

let audio_context = new AudioContext({
    sampleRate: 44000,
});

Answer 3

我解释了@mehmet的答案

频率分辨率：sampleRate / fftSize

要表示总数被划分为显示的eq波段。

calcFreqs(sampleRate, fftSize) {
    const bands = fftSize/2; // bands are half the fftSize
    const fqRange = sampleRate / bands;
    let allocated = [];

    for ( let i = 0, j = bands; i < j; i++ ) {
        sampleRate = Math.round(sampleRate - fqRange);
        allocated.push(sampleRate);
    }
    // console.log(allocated.slice().reverse());
    return allocated.slice().reverse();
}

因此对于超过48,000Hz采样的16个频段：

[0, 3000, 6000, 9000, 12000, 15000, 18000, 21000, 24000, 27000, 30000, 33000, 36000, 39000, 42000, 45000]

我想请专家作一些说明，但这是执行此操作的方法。我的项目在Github

使用AnalyserNode进行频率截止

3 个答案: