WebAudioAPI BiquadFilter только на AnalyserNode - PullRequest
Новая
       13

WebAudioAPI BiquadFilter только на AnalyserNode

0 голосов
/ 15 февраля 2019

Я пытаюсь сделать аудио-визуализатор и хочу фильтровать на басу.Таким образом, обрабатываются только басовые значения.Я могу заставить его работать на аудио просто отлично, но я не могу применить этот фильтр только к узлу анализатора.Как правильно применить этот фильтр только к узлу анализатора, чтобы он не влиял на реальный звук, который вы слышите?

Я попытался изменить порядок подключения узлов, но не смог заставить его работать должным образом. 

// Create a new instance of an audio object and adjust some of its properties
        var audio = new Audio();
        audio.src = 'audio/song1.mp3';
        audio.controls = true;
        audio.loop = true;
        // Establish all variables that your Analyser will use
        var canvas, ctx, source, source2, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height;
        // Initialize the MP3 player after the page loads all of its HTML into the window
        window.addEventListener("load", initMp3Player, false);
        function initMp3Player(){
            document.getElementById('audio_box').appendChild(audio);
            context = new AudioContext(); // AudioContext object instance
            analyser = context.createAnalyser(); // AnalyserNode method
            canvas = document.getElementById('analyser_render');
            ctx = canvas.getContext('2d');
            // Re-route audio playback into the processing graph of the AudioContext
            source = context.createMediaElementSource(audio);
            var lowPassFilter = context.createBiquadFilter();
            lowPassFilter.frequency = 3;
            lowPassFilter.type = 'lowpass';
            source.connect(analyser);
            analyser.connect(lowPassFilter).connect(context.destination);
            frameLooper();
        }
        // frameLooper() animates any style of graphics you wish to the audio frequency
        // Looping at the default frame rate that the browser provides(approx. 60 FPS)
        function frameLooper(){
            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 = '#00CCFF'; // Color of the bars
            bars = 100;
            for (var i = 0; i < bars; i++) {
                bar_x = i * 3;
                bar_width = 2;
                bar_height = -(fbc_array[i] / 2);
                //  fillRect( x, y, width, height ) // Explanation of the parameters below
                ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
            }
        }

Ожидаемый результат: заставить визуализатор отображать только те значения, которые проходят фильтр нижних частот

Фактический результат: в зависимости от порядка методов соединения звук воспроизводится с фильтром низких частот и также применяется кузел анализатора или он применяется к аудио, но не к узлу анализатора. 

<!doctype html>
<html>
<head>
    <style>
        div#mp3_player{ width:500px; height:60px; background:#000; padding:5px; margin:50px auto; }
        div#mp3_player > div > audio{  width:500px; background:#000; float:left;  }
        div#mp3_player > canvas{ width:500px; height:30px; background:#002D3C; float:left; }
    </style>
    <script>
        // Create a new instance of an audio object and adjust some of its properties
        var audio = new Audio();
        audio.src = 'audio/song1.mp3';
        audio.controls = true;
        audio.loop = true;
        // Establish all variables that your Analyser will use
        var canvas, ctx, source, source2, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height;
        // Initialize the MP3 player after the page loads all of its HTML into the window
        window.addEventListener("load", initMp3Player, false);
        function initMp3Player(){
            document.getElementById('audio_box').appendChild(audio);
            context = new AudioContext(); // AudioContext object instance
            analyser = context.createAnalyser(); // AnalyserNode method
            canvas = document.getElementById('analyser_render');
            ctx = canvas.getContext('2d');
            // Re-route audio playback into the processing graph of the AudioContext
            source = context.createMediaElementSource(audio);
            var lowPassFilter = context.createBiquadFilter();
            lowPassFilter.frequency = 3;
            lowPassFilter.type = 'lowpass';
            source.connect(analyser);
            analyser.connect(lowPassFilter).connect(context.destination);
            //source.disconnect(lowPassFilter);
            frameLooper();
        }
        // frameLooper() animates any style of graphics you wish to the audio frequency
        // Looping at the default frame rate that the browser provides(approx. 60 FPS)
        function frameLooper(){
            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 = '#00CCFF'; // Color of the bars
            bars = 100;
            for (var i = 0; i < bars; i++) {
                bar_x = i * 3;
                bar_width = 2;
                bar_height = -(fbc_array[i] / 2);
                //  fillRect( x, y, width, height ) // Explanation of the parameters below
                ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
            }
        }
    </script>
</head>
<body>
<div id="mp3_player">
    <div id="audio_box"></div>
    <canvas id="analyser_render"></canvas>
</div>
</body>
</html>
...