使用AnalyserNode的频率截止

Frequency Cutoff Using AnalyserNode

本文关键字：频率 AnalyserNode 使用      更新时间：2023-09-26

我正在使用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()
        }
    })

只是不要使用分析仪计算的较高频率。要做到这一点，最简单的方法是将bufferLength设置为比analyzer.frequencyBinCount更小的值。分析仪将为您提供尽可能多的数据，并将其余数据丢弃。

仓的间隔均匀，从零到采样率的一半，因此在典型的采样率（44kHz）下，您需要大约一半的仓。更一般地说，Math.ceil(analyser.frequencyBinCount * 10000 / (audioCtx.sampleRate / 2))应该给你想要的号码。

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

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

我解释了@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();
}

因此，对于48000Hz以上的16个波段样本：

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

我想请一位专家澄清一下，但下面是这样做的方法。我的项目在Github

相关文章：