Audio- und Videomanipulation

Die Fähigkeit, die Pixelwerte jedes Videobildes auszulesen, kann sehr nützlich sein.

Das <canvas>-Element bietet eine Oberfläche zum Zeichnen von Grafiken auf Webseiten; es ist sehr leistungsfähig und kann eng mit Video gekoppelt werden.

Die allgemeine Technik besteht darin:

1. Ein Bild vom <video>-Element in das <canvas>-Element zu schreiben.
2. Die Daten aus dem <canvas>-Element auszulesen und zu bearbeiten.
3. Die bearbeiteten Daten in Ihr "Anzeige"-<canvas> zu schreiben (das effektiv dasselbe Element sein kann).
4. Anhalten und wiederholen.

Zum Beispiel, um ein Video in Graustufen anzuzeigen. In diesem Fall zeigen wir sowohl das Quellvideo als auch die ausgegebenen Graustufenbilder. Normalerweise, wenn Sie ein "Video in Graustufen abspielen"-Feature implementieren, würden Sie wahrscheinlich display: none für das <video>-Element in den Stil integrieren, um das Quellvideo davon abzuhalten, auf dem Bildschirm angezeigt zu werden, während nur die geänderten Bilder im Canvas angezeigt werden.

HTML

Wir können unseren Videoplayer und das <canvas>-Element folgendermaßen einrichten:

<video id="my-video" controls width="480" height="270" crossorigin="anonymous">
  <source
    src="https://jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm"
    type="video/webm" />
  <source
    src="https://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v"
    type="video/mp4" />
</video>

<canvas id="my-canvas" width="480" height="270"></canvas>

JavaScript

Dieser Code bearbeitet die Frames.

const processor = {
  timerCallback() {
    if (this.video.paused || this.video.ended) {
      return;
    }
    this.computeFrame();
    setTimeout(() => {
      this.timerCallback();
    }, 16); // roughly 60 frames per second
  },

  doLoad() {
    this.video = document.getElementById("my-video");
    this.c1 = document.getElementById("my-canvas");
    this.ctx1 = this.c1.getContext("2d");

    this.video.addEventListener(
      "play",
      () => {
        this.width = this.video.width;
        this.height = this.video.height;
        this.timerCallback();
      },
      false,
    );
  },

  computeFrame() {
    this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
    const frame = this.ctx1.getImageData(0, 0, this.width, this.height);
    const l = frame.data.length / 4;

    for (let i = 0; i < l; i++) {
      const grey =
        (frame.data[i * 4 + 0] +
          frame.data[i * 4 + 1] +
          frame.data[i * 4 + 2]) /
        3;

      frame.data[i * 4 + 0] = grey;
      frame.data[i * 4 + 1] = grey;
      frame.data[i * 4 + 2] = grey;
    }
    this.ctx1.putImageData(frame, 0, 0);

    return;
  },
};

Sobald die Seite geladen ist, können Sie folgende Funktion aufrufen:

processor.doLoad();

Ergebnis

Dies ist ein Beispiel, das zeigt, wie man Videobilder mit einem Canvas manipuliert. Aus Effizienzgründen sollten Sie den Einsatz von requestAnimationFrame() anstelle von setTimeout() in Erwägung ziehen, wenn Sie in Browsern arbeiten, die es unterstützen.

Das gleiche Ergebnis kann durch Anwendung der grayscale() CSS-Funktion auf das Quell-<video>-Element erzielt werden.

WebGL ist eine leistungsstarke API, die Canvas verwendet, um hardwarebeschleunigte 3D- oder 2D-Szenen zu zeichnen. Sie können WebGL und das <video>-Element kombinieren, um Videotexturen zu erstellen, was bedeutet, dass Sie Video in 3D-Szenen einbetten können.

Wir können auch die Geschwindigkeit, mit der Audio und Video wiedergegeben werden, mit einem Attribut des <audio>- und <video>-Elements namens playbackRate anpassen. playbackRate ist eine Zahl, die einen Multiplikator darstellt, der auf die Abspielgeschwindigkeit angewendet wird, zum Beispiel repräsentiert 0.5 halbe Geschwindigkeit, während 2 doppelte Geschwindigkeit bedeutet.

Beachten Sie, dass die playbackRate-Eigenschaft sowohl mit <audio> als auch <video> funktioniert, aber in beiden Fällen die Abspielgeschwindigkeit und nicht die Tonhöhe ändert. Um die Tonhöhe des Audios zu manipulieren, müssen Sie die Web Audio API verwenden. Siehe die AudioBufferSourceNode.playbackRate-Eigenschaft.

<video id="my-video" controls loop>
  <source src="/shared-assets/videos/flower.mp4" type="video/mp4" />
  <source src="/shared-assets/videos/flower.webm" type="video/webm" />
</video>
<label for="rate">Playback rate <output id="rate-value">1.0</output></label>
<input type="range" id="rate" name="rate" min="0" max="4" value="1" step=".2" />

const rateSlider = document.getElementById("rate");
const rateValue = document.getElementById("rate-value");
const myVideo = document.getElementById("my-video");

rateSlider.addEventListener("input", () => {
  myVideo.playbackRate = rateSlider.value;
  rateValue.textContent = parseFloat(rateSlider.value);
});

body {
  font-family: sans-serif;
}
video,
label,
input {
  display: block;
  padding: 0.5em;
  width: 80%;
  margin: auto;
}

Starten Sie das Video und passen Sie den Schieberegler an, um die Wiedergabegeschwindigkeit der Medien zu ändern:

Abgesehen von playbackRate verwenden Sie typischerweise die Web Audio API, um Audio zu manipulieren.

Die Web Audio API kann Audio aus einer Vielzahl von Quellen empfangen, es dann verarbeiten und an einen AudioDestinationNode senden, der das Ausgabegerät repräsentiert, an welches der Ton nach der Verarbeitung gesendet wird.

Die Web Audio API verfügt über eine Vielzahl von Filtern/Effekten, die auf Audio angewendet werden können, beispielsweise mithilfe des BiquadFilterNode.

<video id="my-video" controls loop>
  <source src="/shared-assets/videos/friday.mp4" type="video/mp4" />
</video>
<label for="freq">Filter freq. <output id="freq-value">1.0</output>hz</label>
<input type="range" id="freq" name="freq" max="20000" value="1000" step="100" />

const freqSlider = document.getElementById("freq");
const freqValue = document.getElementById("freq-value");

const context = new AudioContext();
const audioSource = context.createMediaElementSource(
  document.getElementById("my-video"),
);
const filter = context.createBiquadFilter();
audioSource.connect(filter);
filter.connect(context.destination);

// Configure filter
filter.type = "lowshelf";
filter.frequency.value = 1000;
filter.gain.value = 20;

freqSlider.addEventListener("input", () => {
  filter.frequency.value = freqSlider.value;
  freqValue.textContent = parseFloat(freqSlider.value);
});

Häufige Audiofilter

Dies sind einige gängige Arten von Audiofiltern, die Sie anwenden können:

• Tiefpass: Lässt Frequenzen unterhalb der Grenzfrequenz durch und dämpft Frequenzen über der Grenzfrequenz.
• Hochpass: Lässt Frequenzen oberhalb der Grenzfrequenz durch und dämpft Frequenzen unterhalb der Grenzfrequenz.
• Bandpass: Lässt einen Frequenzbereich passieren und dämpft die Frequenzen unterhalb und oberhalb dieses Bereichs.
• Tiefenbetonung: Lässt alle Frequenzen durch, fügt aber den niedrigeren Frequenzen einen Boost (oder eine Dämpfung) hinzu.
• Höhenbetonung: Lässt alle Frequenzen durch, fügt aber den höheren Frequenzen einen Boost (oder eine Dämpfung) hinzu.
• Peaking: Lässt alle Frequenzen durch, fügt jedoch einem Bereich von Frequenzen einen Boost (oder eine Dämpfung) hinzu.
• Kerbe: Lässt alle Frequenzen durch, außer einem Satz von Frequenzen.
• Allpass: Lässt alle Frequenzen durch, ändert jedoch die Phasenbeziehung zwischen den verschiedenen Frequenzen.

Es ist auch möglich, Impulsantworten auf Audio mit dem ConvolverNode anzuwenden. Eine Impulsantwort ist der Klang, der nach einem kurzen Impuls (wie einem Händeklatschen) entsteht. Eine Impulsantwort signalisiert die Umgebung, in welcher der Impuls erzeugt wurde (zum Beispiel, ein Echo, das durch Händeklatschen in einem Tunnel erzeugt wird).

Beispiel

const convolver = context.createConvolver();
convolver.buffer = this.impulseResponseBuffer;
// Connect the graph.
source.connect(convolver);
convolver.connect(context.destination);

Sehen Sie sich dieses CodePen für ein angewandtes (aber sehr, sehr albernes; wie, kleine Kinder werden kichern) Beispiel an.

Wir können Audio auch mit einem Panner-Knoten positionieren. Ein Panner-Knoten—PannerNode—ermöglicht es uns, einen Quellkegel sowie Positions- und Richtungselemente zu definieren, alles im 3D-Raum, der mithilfe kartesischer 3D-Koordinaten definiert ist.

Beispiel

const panner = context.createPanner();
panner.coneOuterGain = 0.2;
panner.coneOuterAngle = 120;
panner.coneInnerAngle = 0;

panner.connect(context.destination);
source.connect(panner);
source.start(0);

// Position the listener at the origin.
context.listener.setPosition(0, 0, 0);

Es ist auch möglich, Audio auf niedriger Ebene mit JavaScript zu manipulieren. Dies kann nützlich sein, wenn Sie eigene Audiocodecs erstellen möchten.

Aktuell existieren Bibliotheken für folgende Formate:

• AAC: AAC.js
• ALAC: alac.js
• FLAC: flac.js
• MP3: mp3.js
• Opus: Opus.js
• Vorbis: vorbis.js

• Verschiedene Web Audio API (und andere) Beispiele
• THREE.js Video-Würfel-Beispiel
• Faltungseffekte in Echtzeit

• Manipulation von Video mit Canvas
• HTML playbackRate erklärt
• Verwendung der Web Audio API
• Grundlagen der räumlichen Audiopositionierung mit Web Audio
• Verwendung von Videobildern als WebGL Textur (Sie können auch die THREE.js WebGL-Bibliothek (und andere) verwenden, um diesen Effekt zu erreichen)
• Animation von Texturen in WebGL
• Entwicklung von Spielesound mit der Web Audio API (Raumeffekte und Filter) (2012)

• Die <audio>- und <video>-Elemente
• Die HTMLMediaElement API
• Das <canvas>-Element
• Web Audio API
• AudioContext
• Mehr Informationen über Räumliches Audio
• Web Medientechnologien