Chaning Slider Value doesn't change the output - p5.js

Question

I am creating a sound application where it uses filters such as reverb and a dynamic compressor. I tried to implement a slider to change the values of the output, release, etc.
// Dynamic Compressor
// Method 1
dynamicCompressor.amp(sliderDCOutput.value());
dynamicCompressor.set(sliderDCAttack.value(), sliderDCKnee.value(), sliderDCRatio.value(), sliderDCThreshold.value(), sliderDCRelease.value());
dynamicCompressor.drywet(sliderDCDryWet.value());
// Method 2
dynamicCompressor.drywet(sliderDCDryWet.value());
dynamicCompressor.amp(sliderDCOutput.value());
dynamicCompressor.attack(sliderDCAttack.value());
dynamicCompressor.knee(sliderDCKnee.value());
dynamicCompressor.ratio(sliderDCRatio.value());
dynamicCompressor.release(sliderDCRelease.value());
dynamicCompressor.threshold(sliderDCThreshold.value());
I've tried using both methods, but it still doesnt change anything. I tried using the 2 methods for all the filters I'm trying to chain together. I'm not sure if it's even the slider problem or something else altogether.
Here is the whole code just in case:
let mySoundFile = "/Sounds/320952__kevcio__amen-break-f-180-bpm-16-bars.wav";
let LPfilter, wDistortion, dynamicCompressor, reverb, fft;
let playButton, stopButton, sliderVolume, startButton, skipButton, loopButton, recordButton;
let mic, recorder, soundFile, state = 0;
let sliderReverbDuration, sliderReverbDryWet, sliderReverbOutput, sliderReverbDecay, reverbReverseButton, reverseReverb = false;
let sliderLPDryWet, sliderLPOutput, sliderLPCutoffFreq, sliderLPResonance;
let sliderDCDryWet, sliderDCOutput, sliderDCAttack, sliderDCKnee, sliderDCRelease, sliderDCRatio, sliderDCThreshold;
let sliderWDDistortion, sliderWDOversample, sliderWDDryWet, sliderWDOutput;
function preload(){
soundFormats("wav", "mp3");
mySound = loadSound(mySoundFile);
LPfilter = new p5.LowPass();
wDistortion = new p5.Distortion();
dynamicCompressor = new p5.Compressor();
reverb = new p5.Reverb();
fft = new p5.FFT();
mySound.disconnect();
}
function setup() {
createCanvas(1200, 1000);
background(180);
// Set up audio chain
mySound.connect(LPfilter);
LPfilter.chain(wDistortion, dynamicCompressor, reverb);
// Set up other controls and buttons
gui_configuration();
}
function draw() {
mySound.setVolume(sliderVolume.value());
// Low-Pass Filter
LPfilter.amp(sliderLPOutput.value());
LPfilter.set(sliderLPCutoffFreq.value(), sliderLPResonance.value());
LPfilter.drywet(sliderLPDryWet.value());
// Waveshaper Distortion
wDistortion.amp();
if (sliderWDOversample.value() == 0){
wDistortion.set(sliderWDDistortion.value(), "none");
}
else{
wDistortion.set(sliderWDDistortion.value(), `${sliderWDOversample.value()}x`);
}
wDistortion.drywet(sliderWDDryWet.value());
// Dynamic Compressor
dynamicCompressor.amp(sliderDCOutput.value());
dynamicCompressor.set(sliderDCAttack.value(), sliderDCKnee.value(), sliderDCRatio.value(), sliderDCThreshold.value(), sliderDCRelease.value());
dynamicCompressor.drywet(sliderDCDryWet.value());
dynamicCompressor.drywet(sliderDCDryWet.value());
dynamicCompressor.amp(sliderDCOutput.value());
dynamicCompressor.attack(sliderDCAttack.value());
dynamicCompressor.knee(sliderDCKnee.value());
dynamicCompressor.ratio(sliderDCRatio.value());
dynamicCompressor.release(sliderDCRelease.value());
dynamicCompressor.threshold(sliderDCThreshold.value());
// Reverb
reverb.amp(sliderReverbOutput.value());
reverb.set(sliderReverbDuration.value(), sliderReverbDecay.value(), reverseReverb);
reverb.drywet(sliderReverbDryWet.value());
let a = 490
let b = 510
let spectrum = fft.analyze();
noStroke();
fill(0, 255, 0, 200);
for (let i = 0; i < spectrum.length; i++) {
let x = map(i, 0, spectrum.length, a, 800);
let h = -b + map(spectrum[i], 0, 255, b, 300);
rect(x, a, b / spectrum.length, h);
}
// let c = 690;
// let d = 510;
// let spectrum2 = fft2.analyze();
// noStroke()loopButton;
// fill(0, 255, 0, 200);
// for (let i = 0; i < spectrum2.length; i++){
// let x = map(i, 0, spectrum2.length, c, 800);
// let h = -b + map(spectrum2[i], 0, 255, d, 500);
// rect(x, c, d / spectrum2.length, h)
// }
}
function pauseSound(){
mySound.pause();
console.log(getAudioContext().state);
}
function playSound(){
mySound.play();
console.log(getAudioContext().state);
}
function stopSound(){
mySound.stop();
console.log(getAudioContext().state);
}
function jumpToStart(){
mySound.jump(0);
}
function jumpToEnd(){
let dur = mySound.duration();
mySound.jump(dur);
console.log(dur);
}
function loopSound(){
mySound.loop();
}
// Handle recording of audio
function recordSound(){
// Resume audio context if not running
if (getAudioContext().state !== "running"){
getAudioContext().resume();
}
// Check current state and perform appropriate action
switch (state) {
case 0: // Ready to record
// Check if mic is enabled
if (mic.enabled) {
// Display recording message
text("Recording", 505, 100);
// Start recording
recorder.record(soundFile);
// Increment state
state++;
}
break;
case 1: // Recording in progress
// Clear background
background(180);
// Display message
text("Recording has been downloaded", 435, 100);
// Stop recording
recorder.stop();
// Save recording to file
save(soundFile, "output.wav");
// Reset state
state = 0;
break;
default: // Invalid state
console.error("Invalid state");
}
}
function reverbReverse(){
reverseReverb != reverseReverb;
}
function gui_configuration(){
// Pause Button
pauseButton = createButton("Pause");
pauseButton.position(20, 20);
pauseButton.size(60, 60);
pauseButton.mousePressed(pauseSound);
// Play Button
playButton = createButton("Play");
playButton.position(100, 20);
playButton.size(60, 60);
playButton.mousePressed(playSound);
// Stop Button
stopButton = createButton("Stop");
stopButton.position(180,20);
stopButton.size(60, 60);
stopButton.mousePressed(stopSound);
// Master Volume Slider
push();
fill(180);
strokeWeight(2);
stroke(0);
rect(575, 100, 100, 200);
pop();
sliderVolume = createSlider(0, 2, 1, 0.01);
sliderVolume.style("transform: rotate(" + 270 + "deg);");
sliderVolume.position(560, 200);
text("Master Volume", 585, 130);
// Skip to Start Button
startButton = createButton("Skip to Start");
startButton.position(260, 20);
startButton.size(60, 60);
startButton.mousePressed(jumpToStart);
// Skip to End Button
skipButton = createButton("Skip to End");
skipButton.position(340, 20);
skipButton.size(60, 60);
skipButton.mousePressed(jumpToEnd);
// Loop Button
loopButton = createButton("Loop");
loopButton.position(420, 20);
loopButton.size(60, 60);
loopButton.mousePressed(loopSound);
// Record Button
mic = new p5.AudioIn();
mic.start();
recorder = new p5.SoundRecorder();
recorder.setInput(mic);
soundFile = new p5.SoundFile();
recordButton = createButton("Record");
recordButton.position(500, 20);
recordButton.size(60, 60);
recordButton.mousePressed(recordSound);
// Low-Pass Filter Section ////////////
push();
fill(180);
strokeWeight(2);
stroke(0);
rect(20, 100, 200, 420);
pop();
text("Low-Pass Filter", 80, 130);
// Low-Pass Filter Cutoff Frequency Slider
sliderLPCutoffFreq = createSlider(10, 22050, 11020);
sliderLPCutoffFreq.style("transform: rotate(" + 270 + "deg);");
sliderLPCutoffFreq.position(10, 230);
text("Cutoff Frequency", 30, 160);
// Low-Pass Filter Resonance Slider
sliderLPResonance = createSlider(0.001, 1000, 500);
sliderLPResonance.style("transform: rotate(" + 270 + "deg);");
sliderLPResonance.position(100, 230);
text("Resonance", 135, 160);
// Low-Pass Filter Dry/Wet Slider
sliderLPDryWet = createSlider(0, 1.0, 0.5, 0.01);
sliderLPDryWet.style("transform: rotate(" + 270 + "deg);");
sliderLPDryWet.position(10, 430);
text("Dry/Wet", 55, 360);
// Low-Pass Filter Output Level Slider
sliderLPOutput = createSlider(0, 1.0, 0.5, 0.01);
sliderLPOutput.style("transform: rotate(" + 270 + "deg);");
sliderLPOutput.position(100, 430);
text("Output Level", 130, 360);
///////////////////////////////////////
// Waveshaper Distortion //////////////
push();
fill(180);
strokeWeight(2);
stroke(0);
rect(250, 540, 200, 420);
pop();
text("Waveshaper Distortion", 290, 570);
// Waveshaper Distortion Amount Slider
sliderWDDistortion = createSlider(0, 1.0, 0.5, 0.01);
sliderWDDistortion.style("transform: rotate(" + 270 + "deg);");
sliderWDDistortion.position(240, 670);
text("Distortion\n Amount", 280, 590);
// Waveshaper Oversample Slider
sliderWDOversample = createSlider(0, 4, 2, 2);
sliderWDOversample.style("transform: rotate(" + 270 + "deg);");
sliderWDOversample.position(330, 670);
text("Oversample", 365, 600);
// Waveshaper Dry/Wet Slider
sliderWDDryWet = createSlider(0, 4, 2, 2);
sliderWDDryWet.style("transform: rotate(" + 270 + "deg);");
sliderWDDryWet.position(240, 860);
text("Dry/Wet", 285, 790);
// Waveshaper Output Slider
sliderWDOutput = createSlider(0, 4, 2, 2);
sliderWDOutput.style("transform: rotate(" + 270 + "deg);");
sliderWDOutput.position(330, 860);
text("Output Level", 360, 790);
///////////////////////////////////////
// Dynamic Compressor Section /////////
push();
fill(180);
strokeWeight(2);
stroke(0);
rect(250, 100, 300, 400);
pop();
text("Dynamic Compressor", 345, 130);
// Dynamic Compressor Attack Slider
sliderDCAttack = createSlider(0, 1, 0.5, 0.01);
sliderDCAttack.style("transform: rotate(" + 270 + "deg);");
sliderDCAttack.position(220, 230);
text("Attack", 270, 160);
// Dynamic Compressor Knee Slider
sliderDCKnee = createSlider(0, 40, 20);
sliderDCKnee.style("transform: rotate(" + 270 + "deg);");
sliderDCKnee.position(280, 230);
text("Knee", 330, 160);
// Dynamic Compressor Release Slider
sliderDCRelease = createSlider(0, 1.0, 0.5, 0.01);
sliderDCRelease.style("transform: rotate(" + 270 + "deg);");
sliderDCRelease.position(340, 230);
text("Release", 385, 160);
// Dynamic Compressor Ratio Slider
sliderDCRatio = createSlider(1, 20, 10);
sliderDCRatio.style("transform: rotate(" + 270 + "deg);");
sliderDCRatio.position(400, 230);
text("Ratio", 450, 160);
// Dynamic Compressor Threshold Slider
sliderDCThreshold = createSlider(-100, 0, -50);
sliderDCThreshold.style("transform: rotate(" + 270 + "deg);");
sliderDCThreshold.position(450, 230);
text("Threshold", 490, 160);
// Dynamic Compressor Dry/Wet Slider
sliderDCDryWet = createSlider(0, 1.0, 0.5, 0.01);
sliderDCDryWet.style("transform: rotate(" + 270 + "deg);");
sliderDCDryWet.position(280, 400);
text("Dry/Wet", 325, 330);
// Dynamic Compressor Output Level Slider
sliderDCOutput = createSlider(0, 1.0, 0.5, 0.01);
sliderDCOutput.style("transform: rotate(" + 270 + "deg);");
sliderDCOutput.position(400, 400);
text("Output Level", 430, 330);
///////////////////////////////////////
// Reverb Section /////////////////////
push();
fill(180);
strokeWeight(2);
stroke(0);
rect(20, 540, 200, 450);
pop();
text("Reverb", 105, 570);
// Reverb Duration Slider
sliderReverbDuration = createSlider(0, 10, 5);
sliderReverbDuration.style("transform: rotate(" + 270 + "deg);");
sliderReverbDuration.position(10, 670);
text("Reverb Duration", 35, 600);
// Reverb Decay Rate Slider
sliderReverbDecay = createSlider(0, 100, 50);
sliderReverbDecay.style("transform: rotate(" + 270 + "deg);");
sliderReverbDecay.position(100, 670);
text("Decay Rate", 135, 600);
// Reverb Reverse Button
reverbReverseButton = createButton("Reverse");
reverbReverseButton.position(45, 760);
reverbReverseButton.size(60,40);
reverbReverseButton.mousePressed(reverbReverse);
// Reverb Dry/Wet Slider
sliderReverbDryWet = createSlider(0, 1.0, 0.5, 0.01);
sliderReverbDryWet.style("transform: rotate(" + 270 + "deg);");
sliderReverbDryWet.position(10, 900);
text("Dry/Wet", 55, 830);
// Reverb Output Level Slider
sliderReverbOutput = createSlider(0, 1.0, 0.5, 0.01);
sliderReverbOutput.style("transform: rotate(" + 270 + "deg);");
sliderReverbOutput.position(100, 900);
text("Output Level", 130, 830);
}