feat: Add phaser effect implementation and UI controls for real-time audio processing

Author: LogicCuteGuy

examples/phaser_example.rs

@@ -0,0 +1,93 @@
+//! Phaser Example
+//!
+//! This example demonstrates how to create a phaser effect using
+//! all-pass filters.
+
+use cute_dsp::delay::{Delay, InterpolatorLinear};
+
+struct AllPassFilter {
+    delay: Delay<f32, InterpolatorLinear<f32>>,
+    feedback: f32,
+}
+
+impl AllPassFilter {
+    fn new(max_delay_samples: usize, feedback: f32) -> Self {
+        Self {
+            delay: Delay::new(InterpolatorLinear::new(), max_delay_samples),
+            feedback,
+        }
+    }
+
+    fn process(&mut self, input: f32) -> f32 {
+        let delayed = self.delay.read(5.0); // Fixed delay of 5 samples for simplicity
+        let output = input + delayed * self.feedback;
+        self.delay.write(output);
+        delayed - output * self.feedback
+    }
+}
+
+struct Phaser {
+    allpass_filters: Vec<AllPassFilter>,
+    mix: f32,
+}
+
+impl Phaser {
+    fn new() -> Self {
+        let mut allpass_filters = Vec::new();
+
+        // Create 4 all-pass filters with different delays
+        for i in 0..4 {
+            let max_delay = 10 + i * 2; // Different delay lengths
+            allpass_filters.push(AllPassFilter::new(max_delay, 0.7));
+        }
+
+        Self {
+            allpass_filters,
+            mix: 0.5,
+        }
+    }
+
+    fn set_mix(&mut self, mix: f32) {
+        self.mix = mix;
+    }
+
+    fn process(&mut self, input: f32) -> f32 {
+        // Process through all-pass filters
+        let mut output = input;
+        for filter in &mut self.allpass_filters {
+            output = filter.process(output);
+        }
+
+        // Mix dry/wet
+        input * (1.0 - self.mix) + output * self.mix
+    }
+}
+
+fn main() {
+    println!("Phaser Example");
+    println!("==============");
+
+    const BUFFER_SIZE: usize = 100;
+
+    // Create phaser
+    let mut phaser = Phaser::new();
+
+    // Test with impulse
+    let mut impulse = vec![0.0; BUFFER_SIZE];
+    impulse[0] = 1.0;
+
+    println!("Phaser impulse response (first 20 samples):");
+    for i in 0..20 {
+        let output = phaser.process(impulse[i]);
+        println!("Sample {}: {:.6}", i, output);
+    }
+
+    // Test with sine wave
+    println!("\nPhaser on sine wave (first 20 samples):");
+    phaser = Phaser::new(); // Reset
+    for i in 0..20 {
+        let input = (i as f32 * 440.0 * 2.0 * std::f32::consts::PI / 44100.0).sin() * 0.5;
+        let output = phaser.process(input);
+        println!("Sample {}: {:.6}", i, output);
+    }
+}

web_example/audio-processor.js

@@ -272,6 +272,69 @@ class SimpleChorus {
     }
 }
 
+// Simple Phaser Effect
+class SimplePhaser {
+    constructor(sampleRate) {
+        this.sampleRate = sampleRate;
+        this.allpassFilters = [];
+        
+        // Create 4 all-pass filters for the phaser
+        for (let i = 0; i < 4; i++) {
+            this.allpassFilters.push({
+                delay: Math.floor((0.005 + i * 0.002) * sampleRate), // 5ms to 11ms delays
+                feedback: 0.7,
+                buffer: new Float32Array(Math.ceil(0.015 * sampleRate)), // 15ms max
+                writeIndex: 0
+            });
+        }
+        
+        this.lfo = new SimpleLFO();
+        this.lfo.set_frequency(0.5, sampleRate); // 0.5 Hz modulation
+        
+        this.mix = 0.5;
+        this.depth = 0.5;
+    }
+
+    set_mix(value) {
+        this.mix = value;
+    }
+
+    set_depth(value) {
+        this.depth = value;
+    }
+
+    process(input, output) {
+        // Start with input
+        for (let i = 0; i < input.length; i++) {
+            output[i] = input[i];
+        }
+
+        // Get LFO value for modulation
+        const lfoValue = this.lfo.process();
+        
+        // Process through all-pass filters with modulated feedback
+        for (let filter of this.allpassFilters) {
+            const modulatedFeedback = filter.feedback * (1 + lfoValue * this.depth);
+            
+            for (let i = 0; i < input.length; i++) {
+                const readIndex = (filter.writeIndex - filter.delay + filter.buffer.length) % filter.buffer.length;
+                const delayed = filter.buffer[readIndex];
+                
+                const filtered = output[i] + delayed * modulatedFeedback;
+                filter.buffer[filter.writeIndex] = filtered;
+                filter.writeIndex = (filter.writeIndex + 1) % filter.buffer.length;
+                
+                output[i] = filtered * -modulatedFeedback + delayed;
+            }
+        }
+
+        // Mix dry/wet
+        for (let i = 0; i < input.length; i++) {
+            output[i] = input[i] * (1 - this.mix) + output[i] * this.mix;
+        }
+    }
+}
+
 class CuteDSPProcessor extends AudioWorkletProcessor {
     constructor() {
         super();
@@ -281,6 +344,7 @@ class CuteDSPProcessor extends AudioWorkletProcessor {
         this.distortion = null;
         this.reverb = null;
         this.chorus = null;
+        this.phaser = null;
         this.sampleRate = sampleRate;
         this.isInitialized = false;
 
@@ -290,7 +354,8 @@ class CuteDSPProcessor extends AudioWorkletProcessor {
             delay: true,
             distortion: false,
             reverb: false,
-            chorus: false
+            chorus: false,
+            phaser: false
         };
 
         // Pre-allocate buffers to avoid allocations during processing
@@ -343,6 +408,12 @@ class CuteDSPProcessor extends AudioWorkletProcessor {
                         this.chorus.set_depth(data.depth);
                     }
                     break;
+                case 'updatePhaser':
+                    if (this.phaser) {
+                        this.phaser.set_mix(data.mix);
+                        this.phaser.set_depth(data.depth);
+                    }
+                    break;
                 case 'toggleEffect':
                     if (this.effectsEnabled.hasOwnProperty(data.effect)) {
                         this.effectsEnabled[data.effect] = data.enabled;
@@ -378,6 +449,10 @@ class CuteDSPProcessor extends AudioWorkletProcessor {
             this.chorus.set_mix(0.4);
             this.chorus.set_depth(0.005);
 
+            this.phaser = new SimplePhaser(this.sampleRate);
+            this.phaser.set_mix(0.5);
+            this.phaser.set_depth(0.5);
+
             this.isInitialized = true;
             this.port.postMessage({ type: 'ready' });
 
@@ -476,6 +551,12 @@ class CuteDSPProcessor extends AudioWorkletProcessor {
             this.reverb.process(output, this.tempBuffer1);
             [output, this.tempBuffer1] = [this.tempBuffer1, output]; // Swap buffers
         }
+
+        // Apply phaser (if enabled)
+        if (this.effectsEnabled.phaser) {
+            this.phaser.process(output, this.tempBuffer1);
+            [output, this.tempBuffer1] = [this.tempBuffer1, output]; // Swap buffers
+        }
     }
 }
 

web_example/index.html

@@ -159,7 +159,7 @@
         }
 
         .status.error {
-            background: rgba(231, 76, 60, 0.2);
+            background: rgba(
             border: 1px solid rgba(231, 76, 60, 0.3);
         }
 
@@ -291,6 +291,21 @@ <h3>🌊 Chorus</h3>
                     <label><input type="checkbox" id="chorus-enabled"> Enable Chorus</label>
                 </div>
             </div>
+
+            <div class="control-group">
+                <h3>🌈 Phaser</h3>
+                <div class="slider-container">
+                    <label for="phaser-mix">Mix: <span id="phaser-mix-value">0.5</span></label>
+                    <input type="range" id="phaser-mix" min="0.0" max="1.0" value="0.5" step="0.01">
+                </div>
+                <div class="slider-container">
+                    <label for="phaser-depth">Depth: <span id="phaser-depth-value">0.5</span></label>
+                    <input type="range" id="phaser-depth" min="0.0" max="1.0" value="0.5" step="0.01">
+                </div>
+                <div style="margin-top: 10px;">
+                    <label><input type="checkbox" id="phaser-enabled"> Enable Phaser</label>
+                </div>
+            </div>
         </div>
 
         <div style="text-align: center; margin: 30px 0;">
@@ -313,6 +328,7 @@ <h3>ℹ️ About This Demo</h3>
                 <li><strong>Distortion:</strong> Soft-clipping distortion with drive and amount controls</li>
                 <li><strong>Reverb:</strong> Schroeder reverb with adjustable mix and decay</li>
                 <li><strong>Chorus:</strong> Multi-voice chorus effect with modulation depth control</li>
+                <li><strong>Phaser:</strong> All-pass filter phaser with LFO modulation and adjustable mix/depth</li>
             </ul>
             <p><strong>Features:</strong></p>
             <ul>
@@ -577,6 +593,17 @@ <h3>ℹ️ About This Demo</h3>
                 }
             }
 
+            updatePhaser() {
+                if (this.worklet && this.isProcessing) {
+                    const mix = this.getPhaserMix();
+                    const depth = this.getPhaserDepth();
+                    this.worklet.port.postMessage({
+                        type: 'updatePhaser',
+                        data: { mix, depth }
+                    });
+                }
+            }
+
             toggleEffect(effect, enabled) {
                 if (this.worklet && this.isProcessing) {
                     this.worklet.port.postMessage({
@@ -600,6 +627,8 @@ <h3>ℹ️ About This Demo</h3>
             getReverbDecay() { return parseFloat(document.getElementById('reverb-decay').value); }
             getChorusMix() { return parseFloat(document.getElementById('chorus-mix').value); }
             getChorusDepth() { return parseFloat(document.getElementById('chorus-depth').value); }
+            getPhaserMix() { return parseFloat(document.getElementById('phaser-mix').value); }
+            getPhaserDepth() { return parseFloat(document.getElementById('phaser-depth').value); }
         }
 
         // Initialize the application
@@ -662,6 +691,8 @@ <h3>ℹ️ About This Demo</h3>
                         processor.updateReverb();
                     } else if (slider.id === 'chorus-mix' || slider.id === 'chorus-depth') {
                         processor.updateChorus();
+                    } else if (slider.id === 'phaser-mix' || slider.id === 'phaser-depth') {
+                        processor.updatePhaser();
                     }
                     delete updateThrottle[slider.id];
                 }, 16); // ~60fps throttling (16ms)