<div id="container"><canvas id="canvas"></canvas></div>
<audio id="audio" controls crossorigin></audio>
<input id="audioFileInput" type="file" accept="audio/*">
<script id="CustomDSPEffect" type="worklet">
// Similar to Downmix channels to mono DSP effect from foobar2000, but preserves LFE effects
class DownmixToMono extends AudioWorkletProcessor {
  constructor() {
    super();
  }
  
  process(inputs, outputs, parameters) {
    const input = inputs[0],
          output = outputs[0],
          dataArray = [];
    for (let i = 0; i < input[0].length; i++) {
      let sum = 0;
      for (let j = 0; j < input.length; j++) {
        sum += input[j][i];
      }
      dataArray[i] = sum/input.length;
    }
    input.forEach((channel, x) => {
      for (let i = 0; i < channel.length; i++) {
        output[x][i] = dataArray[i];
      }
    });
    return true;
  }
}
registerProcessor('downmix-channels-to-mono', DownmixToMono);

class BassBoost extends AudioWorkletProcessor {
  static get parameterDescriptors() {
    return [{
        name: 'freq',
        defaultValue: 50,
        minValue: 0
      },{
        name: 'gain',
        defaultValue: 12
      }];
  }
  
  constructor() {
    super();
    this.smoothedValues0 = [];
    this.smoothedValues1 = [];
    this.smoothedValues2 = [];
    this.smoothedValues3 = [];
    this.ampTodB = x => {
      return 20*Math.log10(x);
    };
    this.dBToAmp = x => {
      return 10 ** (x/20);
    }
  }
  
  process(inputs, outputs, parameters) {
    const decayTime = Math.E ** (-parameters.freq[0]/sampleRate*8),
          input = inputs[0],
          output = outputs[0];
    this.smoothedValues0.length = input.length;
    this.smoothedValues1.length = input.length;
    this.smoothedValues2.length = input.length;
    this.smoothedValues3.length = input.length;
    input.forEach((channel, x) => {
      for (let i = 0; i < channel.length; i++) {
        const sample = channel[i];
        this.smoothedValues0[x] = isFinite(this.smoothedValues0[x]) ? sample * (1-decayTime) + this.smoothedValues0[x] * decayTime : sample;
        this.smoothedValues1[x] = isFinite(this.smoothedValues1[x]) ? this.smoothedValues0[x] * (1-decayTime) + this.smoothedValues1[x] * decayTime : this.smoothedValues0[x];
        this.smoothedValues2[x] = isFinite(this.smoothedValues2[x]) ? this.smoothedValues1[x] * (1-decayTime) + this.smoothedValues2[x] * decayTime : this.smoothedValues1[x];
        this.smoothedValues3[x] = isFinite(this.smoothedValues3[x]) ? this.smoothedValues2[x] * (1-decayTime) + this.smoothedValues3[x] * decayTime : this.smoothedValues2[x];
        output[x][i] = input[x][i] + this.smoothedValues3[x] * (this.dBToAmp(parameters.gain[0])-1);
      }
    });
    return true;
  }
}
registerProcessor('bass-boost', BassBoost);  

class CustomDSPEffect extends AudioWorkletProcessor {
  static get parameterDescriptors() {
    return [{
      name: 'strength',
      defaultValue: 1
    },
    {
      name: 'decay',
      defaultValue: 1
    }];
  }
  constructor() {
    super();
    this.values = [],
    this.vels = [];
  }
  process(inputs, outputs, parameters) {
    const input = inputs[0],
          output = outputs[0],
          strength = parameters.strength[0]/100,
          decay = parameters.decay[0]/100;
    this.values.length = input.length;
    this.vels.length = this.values.length;
    input.forEach((channel, x) => {
      for (let i = 0; i < channel.length; i++) {
        //this.values[x] = isFinite(this.values[x]) ? this.values[x]+strength*Math.sign(channel[i]-this.values[x]) : channel[i];
        this.vels[x] = isFinite(this.vels[x]) ? this.vels[x]+strength*Math.sign(channel[i]-this.values[x]) : 0;
        this.values[x] = isFinite(this.values[x]) ? (this.values[x]+this.vels[x])*(1-decay) : channel[i];
        output[x][i] = this.values[x];
      }
    });
    return true;
  }
}

registerProcessor('custom-dsp-effect', CustomDSPEffect);
// Technically, we can register multiple processors within a single script in the similar way to how a single foobar2000 DSP component like Utility DSP Array and Effects DSP adds more than one DSP effect
// Simple peak compressor using leaky integrator
class CompressorProcessor extends AudioWorkletProcessor {
  static get parameterDescriptors() {
    return [{
        name: 'threshold',
        defaultValue: -12
      },{
        name: 'threshold2',
        defaultValue: -48
      },{
        name: 'upperLimit',
        defaultValue: 60
      },{
        name: 'lowerLimit',
        defaultValue: 30
      },{
        name: 'ratio',
        defaultValue: 2
      },{
        name: 'ratio2',
        defaultValue: 1
      },{
        name: 'attack',
        defaultValue: 5,
        minValue: 0
      },{
        name: 'release',
        defaultValue: 50,
        minValue: 0
      },{
        name: 'makeupGain',
        defaultValue: 0
      },{
        name: 'mix',
        defaultValue: 100,
        minValue: 0,
        maxValue: 100
      }];
  }
  
  constructor() {
    super();
    this.envelopeValues = [];
    this.ampTodB = x => {
      return 20*Math.log10(x);
    };
    this.dBToAmp = x => {
      return 10 ** (x/20);
    }
  }
  
  process(inputs, outputs, parameters) {
    const input = inputs[0],
          output = outputs[0],
          attTime = Math.E ** (-1/(parameters.attack[0]*sampleRate/1000)),
          relTime = Math.E ** (-1/(parameters.release[0]*sampleRate/1000)),
          slope = 1 - (1/parameters.ratio[0]),
          slope2 = 1 - (1/parameters.ratio2[0]);
    this.envelopeValues.length = input.length;
    input.forEach((channel, x) => {
      for (let i = 0; i < channel.length; i++) {
        const amp = this.ampTodB(Math.abs(channel[i]));
        const gainReduction = 
              (Math.abs(slope) <= 0 ? 0 : Math.max(Math.min((-amp+parameters.threshold[0]), 0), -parameters.upperLimit[0]/Math.abs(slope)))*slope -
              (Math.abs(slope2) <= 0 ? 0 : Math.min(Math.max((amp-parameters.threshold2[0]), -parameters.lowerLimit[0]/Math.abs(slope2)), 0))*slope2;
        const smoothingTimeConstant = gainReduction > this.envelopeValues[x] ? relTime : attTime;
        this.envelopeValues[x] = isFinite(this.envelopeValues[x]) ? gainReduction * (1-smoothingTimeConstant) + this.envelopeValues[x] * (smoothingTimeConstant) : gainReduction;
        
        output[x][i] = input[x][i] * (this.dBToAmp(this.envelopeValues[x]) * parameters.mix[0]/100 + (1-parameters.mix[0]/100)) * this.dBToAmp(parameters.makeupGain[0]);
      }
    });
    return true;
  }
}

registerProcessor('compressor-processor', CompressorProcessor);
  
class LimiterProcessor extends AudioWorkletProcessor {
  static get parameterDescriptors() {
    return [{
        name: 'threshold',
        defaultValue: 0
      },{
        name: 'attack',
        defaultValue: 5,
        minValue: 0
      },{
        name: 'release',
        defaultValue: 50,
        minValue: 0
      },{
        name: 'autoReleaseDiff',
        defaultValue: 2,
        minValue: 0,
      },{
        name: 'autoReleaseAmount',
        defaultValue: 0,
      },{
        name: 'autoReleaseTime',
        defaultValue: 100,
        minValue: 0
      }];
  }
  
  constructor() {
    super();
    this.envelopeValues = [];
    this.fastEnvelopes = [];
    this.slowEnvelopes = [];
    this.ampTodB = x => {
      return 20*Math.log10(x);
    };
    this.dBToAmp = x => {
      return 10 ** (x/20);
    }
  }
  
  process(inputs, outputs, parameters) {
    const input = inputs[0],
          output = outputs[0],
          attTime = Math.E ** (-1/(parameters.attack[0]*sampleRate/1000)),
          relTime = Math.E ** (-1/(parameters.release[0]*sampleRate/1000)),
          // auto-release values
          fastEnvTime = Math.E ** (-1/(parameters.autoReleaseTime[0]*sampleRate/1000)),
          slowEnvTime = Math.E ** (-1/(parameters.autoReleaseTime[0]*parameters.autoReleaseDiff[0]*sampleRate/1000));
    this.envelopeValues.length = input.length;
    this.fastEnvelopes.length = input.length;
    this.slowEnvelopes.length = input.length;
    input.forEach((channel, x) => {
      for (let i = 0; i < channel.length; i++) {
        const linearAmp = Math.abs(input[x][i]);
        this.fastEnvelopes[x] = isFinite(this.fastEnvelopes[x]) ? linearAmp * (1-fastEnvTime) + this.fastEnvelopes[x] * fastEnvTime : linearAmp;
        this.slowEnvelopes[x] = isFinite(this.slowEnvelopes[x]) ? linearAmp * (1-slowEnvTime) + this.slowEnvelopes[x] * slowEnvTime : linearAmp;
        
        const amp = this.ampTodB(Math.abs(channel[i])),
              gainReduction = Math.min(0, -amp+parameters.threshold[0]),
              envRatio = this.fastEnvelopes[x]/this.slowEnvelopes[x],
              reductionSpeedMultiplier = parameters.autoReleaseAmount[0] !== 0 && isFinite(envRatio) ? envRatio ** (parameters.autoReleaseAmount[0]/100) : 1,
              smoothingTimeConstant = (gainReduction > this.envelopeValues[x] ? relTime : attTime) ** reductionSpeedMultiplier;
        this.envelopeValues[x] = isFinite(this.envelopeValues[x]) ? gainReduction * (1-smoothingTimeConstant) + this.envelopeValues[x] * (smoothingTimeConstant) : gainReduction;
        
        output[x][i] = input[x][i] * this.dBToAmp(this.envelopeValues[x]-parameters.threshold[0]); // peaks can go above 0dBFS if attack time is more than zero because we don't apply a lookahead
      }
    });
    return true;
  }
}

registerProcessor('limiter-processor', LimiterProcessor);

class WinampEQLimiter extends AudioWorkletProcessor {
  static get parameterDescriptors() {
    return [{
        name: 'threshold',
        defaultValue: 0
      },{
        name: 'ceiling',
        defaultValue: 0
      },{
        name: 'release',
        defaultValue: 700,
        minValue: 0
      },{
        name: 'channelLink',
        defaultValue: 100,
        minValue: 0,
        maxValue: 100
      }];
  }
  
  constructor() {
    super();
    this.envelopeValues = [];
    this.ampTodB = x => {
      return 20*Math.log10(x);
    };
    this.dBToAmp = x => {
      return 10 ** (x/20);
    }
  }
  
  process(inputs, outputs, parameters) {
    const input = inputs[0],
          output = outputs[0],
          relTime = 0.001 ** (1/(parameters.release[0]*sampleRate/1000));
    this.envelopeValues.length = input.length;
    const globalValue = [];
    input.forEach((channel, x) => {
      for (let i = 0; i < channel.length; i++) {
        globalValue[i] = Math.max(isFinite(globalValue[i]) ? globalValue[i] : 0, Math.abs(channel[i])) * (parameters.channelLink[0] / 100);
      }
    });
    input.forEach((channel, x) => {
      for (let i = 0; i < channel.length; i++) {
        const preamp = this.dBToAmp(-parameters.threshold[0]),
              ceiling = this.dBToAmp(parameters.ceiling[0]),
              amp = Math.max(Math.abs(input[x][i]), isFinite(globalValue[i]) ? globalValue[i] : 0) * preamp / ceiling;
        this.envelopeValues[x] = Math.max(isFinite(this.envelopeValues[x]) ? this.envelopeValues[x] * relTime : isFinite(amp) ? amp : 0, isFinite(amp) ? amp : 0);
        
        output[x][i] = input[x][i] * preamp * Math.min(1/this.envelopeValues[x], 1);
      }
    });
    return true;
  }
}
registerProcessor('waeqlim-dsp', WinampEQLimiter);

</script>
<script>
  function map(x, min, max, targetMin, targetMax) {
    return (x - min) / (max - min) * (targetMax - targetMin) + targetMin;
  }
  
  function clamp(x, min, max) {
    return Math.min(Math.max(x, min), max);
  }
  
  function idxWrapOver(x, length) {
    return (x % length + length) % length;
  }
  // Hz and FFT bin conversion
function hertzToFFTBin(x, y = 'round', bufferSize = 4096, sampleRate = 44100) {
  const bin = x * bufferSize / sampleRate;
  let func = y;
  
  if (!['floor','ceil','trunc'].includes(func))
    func = 'round'; // always use round if you specify an invalid/undefined value
  
  return Math[func](bin);
}

function fftBinToHertz(x, bufferSize = 4096, sampleRate = 44100) {
  return x * sampleRate / bufferSize;
}
  

// Calculate the FFT
function calcFFT(input) {
  let fft = input.map(x => x);
  let fft2 = input.map(x => x);
  transform(fft, fft2);
  let output = new Array(Math.round(fft.length/2)).fill(0);
  for (let i = 0; i < output.length; i++) {
    output[i] = Math.hypot(fft[i], fft2[i])/(fft.length);
  }
  return output;
}

function calcComplexFFT(input) {
  let fft = input.map(x => x);
  let fft2 = input.map(x => x);
  transform(fft, fft2);
  return input.map((_, i, arr) => {
    return {
      re: fft[i]/(arr.length/2),
      im: fft2[i]/(arr.length/2),
      magnitude: Math.hypot(fft[i], fft2[i])/(arr.length/2),
      phase: Math.atan2(fft2[i], fft[i])
    };
  });
}
  
function calcComplexInputFFT(real, imag) {
  if (real.length !== imag.length)
    return [];
  const fft1 = real.map(x => x),
        fft2 = imag.map(x => x);
  transform(fft1, fft2);
  return real.map((_, i, arr) => {
    return {
      re: fft1[i]/arr.length,
      im: fft2[i]/arr.length,
      magnitude: Math.hypot(fft1[i], fft2[i])/arr.length,
      phase: Math.atan2(fft2[i], fft1[i])
    }
  });
}
  
  /**
 * FFT and convolution (JavaScript)
 * 
 * Copyright (c) 2017 Project Nayuki. (MIT License)
 * https://www.nayuki.io/page/free-small-fft-in-multiple-languages
 */

/* 
 * Computes the discrete Fourier transform (DFT) of the given complex vector, storing the result back into the vector.
 * The vector can have any length. This is a wrapper function.
 */
function transform(real, imag) {
	const n = real.length;
	if (n != imag.length)
		throw "Mismatched lengths";
	if (n <= 0)
		return;
	else if ((2 ** Math.trunc(Math.log2(n))) === n)  // Is power of 2
		transformRadix2(real, imag);
	else  // More complicated algorithm for arbitrary sizes
		transformBluestein(real, imag);
}


/* 
 * Computes the inverse discrete Fourier transform (IDFT) of the given complex vector, storing the result back into the vector.
 * The vector can have any length. This is a wrapper function. This transform does not perform scaling, so the inverse is not a true inverse.
 */
function inverseTransform(real, imag) {
	transform(imag, real);
}


/* 
 * Computes the discrete Fourier transform (DFT) of the given complex vector, storing the result back into the vector.
 * The vector's length must be a power of 2. Uses the Cooley-Tukey decimation-in-time radix-2 algorithm.
 */
function transformRadix2(real, imag) {
	// Length variables
	const n = real.length;
	if (n != imag.length)
		throw "Mismatched lengths";
	if (n <= 1)  // Trivial transform
		return;
	const logN = Math.log2(n);
	if ((2 ** Math.trunc(logN)) !== n)
		throw "Length is not a power of 2";
	
	// Trigonometric tables
	let cosTable = new Array(n / 2);
	let sinTable = new Array(n / 2);
	for (let i = 0; i < n / 2; i++) {
		cosTable[i] = Math.cos(2 * Math.PI * i / n);
		sinTable[i] = Math.sin(2 * Math.PI * i / n);
	}
	
	// Bit-reversed addressing permutation
	for (let i = 0; i < n; i++) {
		let j = reverseBits(i, logN);
		if (j > i) {
			let temp = real[i];
			real[i] = real[j];
			real[j] = temp;
			temp = imag[i];
			imag[i] = imag[j];
			imag[j] = temp;
		}
	}
	
	// Cooley-Tukey decimation-in-time radix-2 FFT
	for (let size = 2; size <= n; size *= 2) {
		let halfsize = size / 2;
		let tablestep = n / size;
		for (let i = 0; i < n; i += size) {
			for (let j = i, k = 0; j < i + halfsize; j++, k += tablestep) {
				const l = j + halfsize;
				const tpre =  real[l] * cosTable[k] + imag[l] * sinTable[k];
				const tpim = -real[l] * sinTable[k] + imag[l] * cosTable[k];
				real[l] = real[j] - tpre;
				imag[l] = imag[j] - tpim;
				real[j] += tpre;
				imag[j] += tpim;
			}
		}
	}
	
	// Returns the integer whose value is the reverse of the lowest 'bits' bits of the integer 'x'.
	function reverseBits(x, bits) {
		let y = 0;
		for (let i = 0; i < bits; i++) {
			y = (y << 1) | (x & 1);
			x >>>= 1;
		}
		return y;
	}
}


/* 
 * Computes the discrete Fourier transform (DFT) of the given complex vector, storing the result back into the vector.
 * The vector can have any length. This requires the convolution function, which in turn requires the radix-2 FFT function.
 * Uses Bluestein's chirp z-transform algorithm.
 */
function transformBluestein(real, imag) {
	// Find a power-of-2 convolution length m such that m >= n * 2 + 1
	const n = real.length;
	if (n != imag.length)
		throw "Mismatched lengths";
	const m = 2 ** Math.trunc(Math.log2(n*2)+1);
	
	// Trignometric tables
	let cosTable = new Array(n);
	let sinTable = new Array(n);
	for (let i = 0; i < n; i++) {
		let j = i * i % (n * 2);  // This is more accurate than j = i * i
		cosTable[i] = Math.cos(Math.PI * j / n);
		sinTable[i] = Math.sin(Math.PI * j / n);
	}
	
	// Temporary vectors and preprocessing
	let areal = newArrayOfZeros(m);
	let aimag = newArrayOfZeros(m);
	for (let i = 0; i < n; i++) {
		areal[i] =  real[i] * cosTable[i] + imag[i] * sinTable[i];
		aimag[i] = -real[i] * sinTable[i] + imag[i] * cosTable[i];
	}
	let breal = newArrayOfZeros(m);
	let bimag = newArrayOfZeros(m);
	breal[0] = cosTable[0];
	bimag[0] = sinTable[0];
	for (let i = 1; i < n; i++) {
		breal[i] = breal[m - i] = cosTable[i];
		bimag[i] = bimag[m - i] = sinTable[i];
	}
	
	// Convolution
	let creal = new Array(m);
	let cimag = new Array(m);
	convolveComplex(areal, aimag, breal, bimag, creal, cimag);
	
	// Postprocessing
	for (let i = 0; i < n; i++) {
		real[i] =  creal[i] * cosTable[i] + cimag[i] * sinTable[i];
		imag[i] = -creal[i] * sinTable[i] + cimag[i] * cosTable[i];
	}
}


/* 
 * Computes the circular convolution of the given real vectors. Each vector's length must be the same.
 */
function convolveReal(x, y, out) {
	const n = x.length;
	if (n != y.length || n != out.length)
		throw "Mismatched lengths";
	convolveComplex(x, newArrayOfZeros(n), y, newArrayOfZeros(n), out, newArrayOfZeros(n));
}


/* 
 * Computes the circular convolution of the given complex vectors. Each vector's length must be the same.
 */
function convolveComplex(xreal, ximag, yreal, yimag, outreal, outimag) {
	const n = xreal.length;
	if (n != ximag.length || n != yreal.length || n != yimag.length
			|| n != outreal.length || n != outimag.length)
		throw "Mismatched lengths";
	
	xreal = xreal.slice();
	ximag = ximag.slice();
	yreal = yreal.slice();
	yimag = yimag.slice();
	transform(xreal, ximag);
	transform(yreal, yimag);
	
	for (let i = 0; i < n; i++) {
		const temp = xreal[i] * yreal[i] - ximag[i] * yimag[i];
		ximag[i] = ximag[i] * yreal[i] + xreal[i] * yimag[i];
		xreal[i] = temp;
	}
	inverseTransform(xreal, ximag);
	
	for (let i = 0; i < n; i++) {  // Scaling (because this FFT implementation omits it)
		outreal[i] = xreal[i] / n;
		outimag[i] = ximag[i] / n;
	}
}


function newArrayOfZeros(n) {
	let result = new Array(n).fill(0);
	return result;
}
</script>