What are the parameters for createPeriodicWave() in Google Chrome?

var ctx = new webkitAudioContext();
    pw = ctx.createWaveshaper();

Every time I use the CreatePeriodicWave() in Google Chrome I just get

SyntaxError: Failed to construct 'PeriodicWave': invalid real array

What do I put in the function to avoid this error?

Answers


createPeriodicWave expects two arguments -- both are Float32Array instances -- that specify coefficients of a Fourier Series. The first is the real portion, which is an array of cosine terms. The second, imag, represents sine terms.

Is there a specific problem you're trying to solve, though? I have a feeling that just knowing that the args are Float32Array probably isn't going to be that big of a help.


To get a PeriodicWave, the code would be as follows:

var context = new webkitAudioContext();
var realCoeffs = new Float32Array([0,0]); // No DC offset or cosine fundamental freq
var imagCoeffs = new Float32Array([0,1]); // sine of amplitude 1 at fundamental freq (First imaginary coeff is ignored)
var wave = context.createPeriodicWave(realCoeffs, imagCoeffs); // will be a simple sine wave

You can then use the PeriodicWaveform wave in an OscillatorNode:

var osc = context.createOscillator();
osc.setPeriodicWave(wave);
osc.frequency.value = 440;
osc.connect(context.destination);
osc.start(0);

You can read more about the coefficients by looking up "Fourier Series". The short of it is this:

Let's say f is your fundamental frequency (equivalent to osc.frequency.value)

For the real coefficients, Kr:

  • Kr[0] is the DC offset (the amplitude of the "wave" created by cos(0 f t))
  • Kr[1] is the amplitude of the cosine wave at the fundamental frequency (cos(1 f t))
  • Kr[2] is the amplitude of the cosine wave at the 2nd harmonic (cos(2 f t))
  • etc...

For the imaginary coefficients it's the same, except they are sine waves instead, and the 0th coefficent is ignored, since it would be the amplitude of the wave sin(0*t), which is 0 for all t.

Sawtooth wave example:

Note: If you really just want a sawtooth, you can generate it by just setting the type property in an oscillator node to "sawtooth", but if that option were hypothetically not available, this is how you might do it.

For a sawtooth wave, you can see the coefficients here: http://mathworld.wolfram.com/FourierSeriesSawtoothWave.html

A sawtooth has DC offset of 1/2 (i.e. the first real coefficient) - the rest of the real coefficients are 0 - and imaginary coefficients of the form 1 / (nπ). So in order to produce a sawtooth you would replace the lines

var realCoeffs = new Float32Array([0,0]);
var imagCoeffs = new Float32Array([0,1]);

above, with the following:

var numCoeffs = 64; // The more coefficients you use, the better the approximation
var realCoeffs = new Float32Array(numCoeffs);
var imagCoeffs = new Float32Array(numCoeffs);

realCoeffs[0] = 0.5;
for (var i = 1; i < numCoeffs; i++) { // note i starts at 1
    imagCoeffs[i] = 1 / (i * Math.PI);
}

Need Your Help

NullPointerException during creating custom listview

android listview nullpointerexception

I have used following classes and xml to create a android custom listview.

javascript: Unexpected Evaluation Behavior with Ternary Operator

javascript ternary-operator operator-precedence

Problem: The function is not returning the value that is expected (3).