Question

我正在尝试制作音频可视化器，并希望对低音进行过滤。因此，仅处理低音值。我可以使其在音频上正常工作，但我无法仅将此过滤器应用于分析器节点。我如何只在分析器节点上正确应用此过滤器，而又不影响您听到的实际音频？

我尝试弄乱连接节点的顺序，但无法使其正常工作。

// 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>

WebAudioAPI BiquadFilter仅在analyserNode上

0 个答案: