Search code examples
apiaudiowebkitweb-audio-api

Web Audio API WaveShaperNode


How do you use the waveshapernode in the web audio api? particular the curve Float32Array attribute?


Solution

  • Feel free to look at an example here.

    In detail, I create a waveshaper curve with this function:

    WAAMorningStar.prototype.createWSCurve = function (amount, n_samples) {
    
    if ((amount >= 0) && (amount < 1)) {
    
        ND.dist = amount;
    
        var k = 2 * ND.dist / (1 - ND.dist);
    
        for (var i = 0; i < n_samples; i+=1) {
            // LINEAR INTERPOLATION: x := (c - a) * (z - y) / (b - a) + y
            // a = 0, b = 2048, z = 1, y = -1, c = i
            var x = (i - 0) * (1 - (-1)) / (n_samples - 0) + (-1);
            this.wsCurve[i] = (1 + k) * x / (1+ k * Math.abs(x));
        }
    
    }
    

    Then "load" it in a waveshaper node like this:

    this.createWSCurve(ND.dist, this.nSamples);
    this.sigmaDistortNode = this.context.createWaveShaper();
    this.sigmaDistortNode.curve = this.wsCurve;
    

    Everytime I need to change the distortion parameter, I re-create the waveshaper curve:

    WAAMorningStar.prototype.setDistortion = function (distValue) {
        var distCorrect = distValue;
        if (distValue < -1) {
            distCorrect = -1;
        }
        if (distValue >= 1) {
            distCorrect = 0.985;
        }
        this.createWSCurve (distCorrect, this.nSamples);
    }
    

    (I use distCorrect to make the distortion sound nicer, values found euristically). You can find the algorithm I use to create the waveshaper curve here