OscillatorNode.type — Eigenschaft · JavaScript-Referenz

Signatur

OscillatorNode.type

Beschreibung

Die Eigenschaft type eines OscillatorNode legt fest, welche periodische Wellenform der Oszillator erzeugt. Sie ist lesbar und schreibbar und kann auch während der Wiedergabe geändert werden. Der Klang ändert sich dann sofort.

Mögliche Werte sind:

"sine": Sinuswelle, weich und ohne Obertöne (Standardwert)
"square": Rechteckwelle mit Tastverhältnis 0,5, hohl und „8-Bit“-artig
"sawtooth": Sägezahnwelle, hell und obertonreich, gut für subtraktive Synthese
"triangle": Dreieckwelle, weicher als Rechteck, aber mit hörbaren ungeraden Obertönen
"custom": eigene Wellenform, die über setPeriodicWave() festgelegt wird

Den Wert "custom" kann man nicht direkt zuweisen. Er wird automatisch gesetzt, sobald man setPeriodicWave() aufruft oder dem Konstruktor die Option periodicWave übergibt. Die Grundfrequenz stellt man unabhängig von der Wellenform über frequency und detune ein.

Rückgabewert

Typ

"sine" | "square" | "sawtooth" | "triangle" | "custom"

Beschreibung

Ein String mit der aktuellen Wellenform. Standardwert ist "sine".

Beispiele

Rechteckton abspielen

const ctx = new AudioContext();
const osc = ctx.createOscillator();
osc.type = 'square';
osc.frequency.value = 440; // Kammerton A
osc.connect(ctx.destination);

console.log(osc.type);
osc.start();
osc.stop(ctx.currentTime + 1); // nach 1 Sekunde stoppen

square

Wellenform im Konstruktor setzen und per Auswahlfeld umschalten

// HTML: <select id="wave"><option>sine</option><option>square</option><option>sawtooth</option><option>triangle</option></select>
const ctx = new AudioContext();
const osc = new OscillatorNode(ctx, { type: 'sawtooth', frequency: 220 });
const gain = new GainNode(ctx, { gain: 0.2 });
osc.connect(gain).connect(ctx.destination);

document.querySelector('#wave').addEventListener('change', async (e) => {
  await ctx.resume(); // Autoplay-Sperre aufheben
  osc.type = e.target.value; // wird sofort hörbar
});

osc.start();

Eigene Wellenform mit setPeriodicWave

const ctx = new AudioContext();
const osc = ctx.createOscillator();

// Grundton plus 2. und 3. Oberton
const real = new Float32Array([0, 0, 0, 0]);
const imag = new Float32Array([0, 1, 0.5, 0.25]);
const wave = ctx.createPeriodicWave(real, imag);

osc.setPeriodicWave(wave);
console.log(osc.type);

try {
  osc.type = 'custom';
} catch (err) {
  console.log(err.name);
}

custom InvalidStateError

// Wichtig · Fallstricke

Wer type = "custom" direkt zuweist, löst einen InvalidStateError aus. Eine eigene Wellenform legt man immer über setPeriodicWave() fest.
Ungültige Strings wie "noise" oder "Sine" werden stillschweigend ignoriert, wie bei allen WebIDL-Enums: Der alte Wert bleibt erhalten und es gibt keine Fehlermeldung.
Rechteck- und Sägezahnwellen klingen deutlich lauter als Sinuswellen, weil sie mehr Energie enthalten. Deshalb sollte man die Lautstärke mit einem GainNode senken.
Wenn man type während der Wiedergabe umschaltet, kann ein Knacken entstehen. Für weiche Übergänge blendet man kurz über gain.setTargetAtTime() aus und wieder ein.
Browser starten einen AudioContext wegen der Autoplay-Richtlinien oft im Zustand "suspended". Dann hilft ctx.resume() nach einer Nutzeraktion.
Die Eigenschaft wird von allen modernen Browsern unterstützt. Alte WebKit-Versionen kannten stattdessen numerische Konstanten (SINE = 0 usw.), die inzwischen veraltet sind.

Siehe auch

OscillatorNode OscillatorNode.setPeriodicWave() OscillatorNode.frequency OscillatorNode.detune BaseAudioContext.createPeriodicWave() PeriodicWave GainNode