OscillatorNode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

Die OscillatorNode-Schnittstelle repräsentiert eine periodische Wellenform, wie z. B. eine Sinuswelle. Es handelt sich um ein AudioScheduledSourceNode-Audioprozessmodul, das die Erzeugung einer bestimmten Frequenz einer gegebenen Welle verursacht – im Effekt ein konstanter Ton.

Anzahl der Eingänge	`0`
Anzahl der Ausgänge	`1`
Kanalzählmodus	`max`
Kanäle zählen	`2` (nicht verwendet im Standardzählmodus)
Kanalinterpretation	`speakers`

Konstruktor

OscillatorNode(): Erstellt eine neue Instanz eines OscillatorNode-Objekts und bietet optional ein Objekt an, das Standardwerte für die Eigenschaften des Knotens angibt. Alternativ können Sie die BaseAudioContext.createOscillator()-Fabrikmethode verwenden; siehe Erstellen eines AudioNode.

Instanz-Eigenschaften

Erbt auch Eigenschaften von seinem Elternteil AudioScheduledSourceNode.

OscillatorNode.frequency: Ein a-rate AudioParam, das die Frequenz der Oszillation in Hertz repräsentiert (obwohl das zurückgegebene AudioParam schreibgeschützt ist, ist der Wert, den es repräsentiert, nicht). Der Standardwert ist 440 Hz (ein Standard-Mittlerer-A-Ton).
OscillatorNode.detune: Ein a-rate AudioParam, das die Verstimmung der Oszillation in Cent repräsentiert (obwohl das zurückgegebene AudioParam schreibgeschützt ist, ist der Wert, den es repräsentiert, nicht). Der Standardwert ist 0.
OscillatorNode.type: Ein String, der die Form der abzuspielenden Wellenform angibt; dies kann einer von mehreren Standardwerten oder custom sein, um eine PeriodicWave zu verwenden, um eine benutzerdefinierte Wellenform zu beschreiben. Verschiedene Wellen erzeugen unterschiedliche Töne. Standardwerte sind "sine", "square", "sawtooth", "triangle" und "custom". Der Standard ist "sine".

Instanz-Methoden

Erbt auch Methoden von seinem Elternteil AudioScheduledSourceNode.

OscillatorNode.setPeriodicWave(): Setzt eine PeriodicWave, die eine periodische Wellenform beschreibt, die anstelle einer der Standardwellenformen verwendet werden soll; der Aufruf dieser Methode setzt den type auf custom.
AudioScheduledSourceNode.start(): Gibt die genaue Zeit an, zu der der Ton abgespielt werden soll.
AudioScheduledSourceNode.stop(): Gibt die Zeit an, zu der der Ton gestoppt werden soll.

Ereignisse

Erbt auch Ereignisse von seinem Elternteil AudioScheduledSourceNode.

Beispiele

Verwendung eines OscillatorNode

Das folgende Beispiel zeigt die grundlegende Verwendung eines AudioContext zur Erstellung eines Oszillatorknotens und zum Starten der Wiedergabe eines Tons darauf. Für ein Praxisbeispiel sehen Sie sich unser Violent Theremin-Demo (siehe app.js für relevanten Code) an.

// create web audio api context
const audioCtx = new AudioContext();

// create Oscillator node
const oscillator = audioCtx.createOscillator();

oscillator.type = "square";
oscillator.frequency.setValueAtTime(440, audioCtx.currentTime); // value in hertz
oscillator.connect(audioCtx.destination);
oscillator.start();

Verschiedene Oszillatorknotentypen

Die vier eingebauten Oszillator-Typen sind sine, square, triangle und sawtooth. Sie sind die Form der von einem Oszillator erzeugten Wellenform. Interessante Tatsache: Dies sind die Standardwerte für die meisten Synthesizer, weil sie Wellenformen sind, die elektronisch leicht zu erzeugen sind. Dieses Beispiel visualisiert die Wellenformen für die verschiedenen Typen bei unterschiedlichen Frequenzen.

html

<div class="controls">
  <label for="type-select">
    Oscillator type
    <select id="type-select">
      <option>sine</option>
      <option>square</option>
      <option>triangle</option>
      <option>sawtooth</option>
    </select>
  </label>

  <label for="freq-range">
    Frequency
    <input
      type="range"
      min="100"
      max="800"
      step="10"
      value="250"
      id="freq-range" />
  </label>
  <button data-playing="init" id="play-button">Play</button>
</div>

<canvas id="wave-graph"></canvas>

.controls {
  display: flex;
  gap: 1rem;
  margin: 1rem 0;
  align-items: center;
}

#wave-graph {
  width: 500px;
  height: 300px;
  border: 4px solid var(--pink);
}

Der Code besteht aus zwei Teilen: Im ersten Teil richten wir das Sound-Setup ein.

const typeSelect = document.getElementById("type-select");
const frequencyControl = document.getElementById("freq-range");
const playButton = document.getElementById("play-button");

const audioCtx = new AudioContext();
const osc = new OscillatorNode(audioCtx, {
  type: typeSelect.value,
  frequency: frequencyControl.valueAsNumber,
});
// Rather than creating a new oscillator for every start and stop
// which you would do in an audio application, we are just going
// to mute/un-mute for demo purposes - this means we need a gain node
const gain = new GainNode(audioCtx);
const analyser = new AnalyserNode(audioCtx, {
  fftSize: 1024,
  smoothingTimeConstant: 0.8,
});
osc.connect(gain).connect(analyser).connect(audioCtx.destination);

typeSelect.addEventListener("change", () => {
  osc.type = typeSelect.value;
});

frequencyControl.addEventListener("input", () => {
  osc.frequency.value = frequencyControl.valueAsNumber;
});

playButton.addEventListener("click", () => {
  if (audioCtx.state === "suspended") {
    audioCtx.resume();
  }

  if (playButton.dataset.playing === "init") {
    osc.start(audioCtx.currentTime);
    playButton.dataset.playing = "true";
    playButton.innerText = "Pause";
  } else if (playButton.dataset.playing === "false") {
    gain.gain.linearRampToValueAtTime(1, audioCtx.currentTime + 0.2);
    playButton.dataset.playing = "true";
    playButton.innerText = "Pause";
  } else if (playButton.dataset.playing === "true") {
    gain.gain.linearRampToValueAtTime(0.0001, audioCtx.currentTime + 0.2);
    playButton.dataset.playing = "false";
    playButton.innerText = "Play";
  }
});

Im zweiten Teil zeichnen wir die Wellenform auf eine Leinwand unter Verwendung des AnalyserNode, den wir oben erstellt haben.

const dpr = window.devicePixelRatio;
const w = 500 * dpr;
const h = 300 * dpr;
const canvasEl = document.getElementById("wave-graph");
canvasEl.width = w;
canvasEl.height = h;
const canvasCtx = canvasEl.getContext("2d");

const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
analyser.getByteTimeDomainData(dataArray);

// draw an oscilloscope of the current oscillator
function draw() {
  analyser.getByteTimeDomainData(dataArray);

  canvasCtx.fillStyle = "white";
  canvasCtx.fillRect(0, 0, w, h);

  canvasCtx.lineWidth = 4.0;
  canvasCtx.strokeStyle = "black";
  canvasCtx.beginPath();

  const sliceWidth = (w * 1.0) / bufferLength;
  let x = 0;

  for (let i = 0; i < bufferLength; i++) {
    const v = dataArray[i] / 128.0;
    const y = (v * h) / 2;
    if (i === 0) {
      canvasCtx.moveTo(x, y);
    } else {
      canvasCtx.lineTo(x, y);
    }
    x += sliceWidth;
  }

  canvasCtx.lineTo(w, h / 2);
  canvasCtx.stroke();

  requestAnimationFrame(draw);
}

draw();

Warnung: Dieses Beispiel erzeugt ein Geräusch!

Spezifikationen

Specification
Web Audio API # OscillatorNode

Browser-Kompatibilität

Siehe auch

Verwendung der Web Audio API

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden