Oscillator Example

Web Audio API

HTML

<html>
  <body>

    <div>
      <button onclick="play();return false;">play</button>
      <button onclick="stop();return false;">stop</button>
    </div>

    <div>
      <select id="type" onchange="changeType(this);">
        <optgroup label="standard">
          <option>SINE</option>
          <option>SAWTOOTH</option>
          <option>SQUARE</option>
          <option>TRIANGLE</option>
        </optgroup>
        <optgroup label="wave table">
          <option>RANDOM</option>
        </optgroup>
      </select>
    </div>

    <div>
      <label>
        <input onchange="changeParam('frequency', this);" id="frequency" type="range" min="0" max="100000" step="10" value="440"/>
        Frequency
      </label>
    </div>

    <div>
      <label>
        <input onchange="changeParam('detune', this);" id="detune" type="range" min="-4800" max="4800" step="10" value="0"/>
        Detune
      </label>
    </div>

  </body>
</html>

JavaScript

var ctx = new webkitAudioContext(),
    osc,
    type;

function play(type) {
  osc = ctx.createOscillator();
  osc.type = type || osc.SINE;
  osc.connect(ctx.destination);
  osc.noteOn(0);
}

function stop() {
  osc.noteOff(0);
}

function changeParam(paramName, target) {
  osc[paramName].value = target.value;
  console.log(osc[paramName].name + ':' + target.value);
}

function changeType(target) {
  if (osc) {
    stop();
  }
  if (target.value === 'RANDOM') {
    playWaveTable();
  } else {
    play(osc[target.value]);
  }
}

function getRandomArray(size) {
  var a = new Float32Array(size),
      i = size;
  while (i -= 1) {
    a[i] = Math.random() * 100;
  }
  return a;
}

function playWaveTable() {
  var real = getRandomArray(4096),
      imag = getRandomArray(4096),
      wt = ctx.createWaveTable(real, imag);
  osc = ctx.createOscillator();
  osc.setWaveTable(wt);
  osc.connect(ctx.destination);
  osc.noteOn(0);
}