OscillatorNode : AudioNode

OscillatorNode is an audio source that generates a periodic waveform such as a sine, triangle, sawtooth, or square wave (specified by the type property. Created by audioContext.createOscillator().

Spec

Instance Properties

detune : AudioParam readonly

A detuning value to alter the effective frequency (detune is specified in Cents). The default value is 0. This is combined with frequency to produce the effective frequency using the equation: effectiveFrequency = frequency * pow(2, detune / 1200).

Example:

<button onclick='playpause()'>play/pause</button><br>
<input id='input' value='100'>cent <button onclick='setDetune()'>set</button>
<script>
  // Temporary workaround until AudioContext is standardized 
  window.AudioContext = window.AudioContext || window.webkitAudioContext;
 
  var context = new AudioContext();
  var oscillator = context.createOscillator();
  oscillator.start(0);
  var connected = false;
  
  var playpause = function() {
    if (!connected) {
      oscillator.connect(context.destination);
    }
    else {
      oscillator.disconnect();
    }
    connected = !connected;
  };

  var setDetune = function() {
    var input = document.getElementById('input');
    oscillator.detune.value = +input.value;
  };
</script>

Run

Results:

frequency : AudioParam readonly

The frequency of the wave (in Hertz). The default value is 440. This is combined with detune to produce the effective frequency using the equation: effectiveFrequency = frequency * pow(2, detune / 1200).

Example:

<button onclick='playpause()'>play/pause</button><br>
<input id='input' value='440'>hz <button onclick='setFrequency()'>set</button>
<script>
  // Temporary workaround until AudioContext is standardized 
  window.AudioContext = window.AudioContext || window.webkitAudioContext;
 
  var context = new AudioContext();
  var oscillator = context.createOscillator();
  oscillator.start(0);
  var connected = false;
  
  var playpause = function() {
    if (!connected) {
      oscillator.connect(context.destination);
    }
    else {
      oscillator.disconnect();
    }
    connected = !connected;
  };

  var setFrequency = function() {
    var input = document.getElementById('input');
    oscillator.frequency.value = +input.value;
  };
</script>

Run

Results:

type : String

The type of wave generated by this. Can be set to one of 'sine', 'square', 'sawtooth', or 'triangle'. When using setPeriodicWave() to define the waveform, type will be set to 'custom'.

Example:

<button onclick='playpause()'>play/pause</button><br>
<select id='select' onchange='setType(this.value)'></select>
<script>
  var options = ['sine', 'square', 'sawtooth', 'triangle'];
  var select = document.getElementById('select');
  options.forEach(function(option, i) {
    select.add(new Option(option, option));
  });

  // Temporary workaround until AudioContext is standardized 
  window.AudioContext = window.AudioContext || window.webkitAudioContext;
 
  var context = new AudioContext();
  var oscillator = context.createOscillator();
  oscillator.start(0);
  var connected = false;
  
  var playpause = function() {
    if (!connected) {
      oscillator.connect(context.destination);
    }
    else {
      oscillator.disconnect();
    }
    connected = !connected;
  };

  var setType = function(type) {
    oscillator.type = type;
  };
</script>

Run

Results:

Instance Methods

setPeriodicWave(periodicWave : PeriodicWave) : undefined

Sets the shape of the waveform.

Example:

<button onclick='playpause()'>play/pause</button><br>
<input id='input' value='100'>cent <button onclick='setDetune()'>set</button>
<script>
  // Temporary work around until AudioContext is standardized 
  window.AudioContext = window.AudioContext || window.webkitAudioContext;
 
  var context = new AudioContext();
  var oscillator = context.createOscillator();
  oscillator.frequency.value = 100;

  var real = [0];
  var imaginary = [0]; 

  for (var i = 0; i < 8; i++) {
    real.push(Math.cos(i));
    imaginary.push(Math.random());
  }

  var periodicWave = context.createPeriodicWave(new Float32Array(real), new Float32Array(imaginary));
  oscillator.setPeriodicWave(periodicWave);

  oscillator.start(0);
  var connected = false;
  
  var playpause = function() {
    if (!connected) {
      oscillator.connect(context.destination);
    }
    else {
      oscillator.disconnect();
    }
    connected = !connected;
  };

  var setDetune = function() {
    var input = document.getElementById('input');
    oscillator.detune.value = +input.value;
  };
</script>

Run

Results:

start(when : Number) : undefined

stop(when : Number) : undefined

Instance Events

onended / 'ended' event

listener(event : Event) : undefined

home license contribute feedback toggle light/dark mode