Audio- und Videobearbeitung

Die Fähigkeit, die Pixelwerte von jedem Videobild zu lesen, 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. Schreiben Sie ein Bild vom <video>-Element auf das <canvas>-Element.
2. Lesen Sie die Daten vom <canvas>-Element und bearbeiten Sie sie.
3. Schreiben Sie die bearbeiteten Daten auf Ihr "Anzeige"-<canvas> (das effektiv dasselbe Element sein kann).
4. Pausieren Sie und wiederholen Sie den Vorgang.

Beispielsweise können wir ein Video verarbeiten, um es in Graustufen anzuzeigen. In diesem Fall zeigen wir sowohl das Quellvideo als auch die ausgegebenen Graustufenbilder an. Normalerweise, wenn Sie eine Funktion „Video in Graustufen abspielen“ implementieren würden, würden Sie wahrscheinlich display: none zum Stil des <video>-Elements hinzufügen, um zu verhindern, dass das Quellvideo auf dem Bildschirm gezeichnet wird, während nur das Canvas die geänderten Bilder zeigt.

HTML

Wir können unseren Videoplayer und das <canvas>-Element wie folgt 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 Bilder.

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 aufrufen

processor.doLoad();

Ergebnis

Dies ist ein ziemlich einfaches Beispiel, das zeigt, wie man Videobilder mit einem Canvas manipuliert. Für eine effizientere Ausführung sollten Sie in Betracht ziehen, requestAnimationFrame() anstelle von setTimeout() zu verwenden, wenn Sie in Browsern arbeiten, die dies unterstützen.

Sie können das gleiche Ergebnis erzielen, indem Sie die grayscale() CSS-Funktion auf das Quell <video>-Element anwenden.

WebGL ist eine leistungsfähige 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 einfügen können.

Wir können auch die Geschwindigkeit anpassen, mit der Audio und Video abgespielt werden, indem wir ein Attribut des <audio>- und <video>-Elements namens playbackRate verwenden. playbackRate ist eine Zahl, die ein Vielfaches der Wiedergabegeschwindigkeit darstellt, zum Beispiel repräsentiert 0,5 die halbe Geschwindigkeit, während 2 die doppelte Geschwindigkeit repräsentiert.

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

HTML

<video
  id="my-video"
  controls
  src="https://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v"></video>

JavaScript

const myVideo = document.getElementById("my-video");
myVideo.playbackRate = 2;

Editierbares Beispiel

<video id="my-video" controls width="480" height="270">
  <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>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
const myVideo = document.getElementById('my-video');
myVideo.playbackRate = 2;</textarea
>

const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const edit = document.getElementById("edit");
const code = textarea.value;

function setPlaybackRate() {
  eval(textarea.value);
}

reset.addEventListener("click", () => {
  textarea.value = code;
  setPlaybackRate();
});

edit.addEventListener("click", () => {
  textarea.focus();
});

textarea.addEventListener("input", setPlaybackRate);
window.addEventListener("load", setPlaybackRate);

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

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

Die Web Audio API bietet viele verschiedene Filter/Effekte, die auf Audio angewendet werden können, wie zum Beispiel der BiquadFilterNode.

HTML

<video id="my-video" controls src="my-video.mp4" type="video/mp4"></video>

JavaScript

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 = 25;

Editierbares Beispiel

<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>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
  filter.type = "lowshelf";
  filter.frequency.value = 1000;
  filter.gain.value = 25;
</textarea>

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

const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const edit = document.getElementById("edit");
const code = textarea.value;

function setFilter() {
  eval(textarea.value);
}

reset.addEventListener("click", () => {
  textarea.value = code;
  setFilter();
});

edit.addEventListener("click", () => {
  textarea.focus();
});

textarea.addEventListener("input", setFilter);
window.addEventListener("load", setFilter);

Allgemeine Audiofilter

Dies sind einige häufige Arten von Audiofiltern, die Sie anwenden können:

• Low Pass: Ermöglicht Frequenzen unterhalb der Grenzfrequenz und dämpft Frequenzen oberhalb der Grenzfrequenz.
• High Pass: Ermöglicht Frequenzen oberhalb der Grenzfrequenz und dämpft Frequenzen unterhalb der Grenzfrequenz.
• Band Pass: Ermöglicht einen Frequenzbereich und dämpft die Frequenzen unterhalb und oberhalb dieses Bereichs.
• Low Shelf: Ermöglicht alle Frequenzen, fügt aber einen Schub (oder Dämpfung) zu den niedrigeren Frequenzen hinzu.
• High Shelf: Ermöglicht alle Frequenzen, fügt aber einen Schub (oder Dämpfung) zu den höheren Frequenzen hinzu.
• Peaking: Ermöglicht alle Frequenzen, fügt aber einen Schub (oder Dämpfung) zu einem Frequenzbereich hinzu.
• Notch: Ermöglicht alle Frequenzen, außer für einen Satz von Frequenzen.
• All Pass: Ermöglicht alle Frequenzen, ä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 von Klang (wie einem Handklatschen) erzeugt wird. Eine Impulsantwort wird die Umgebung angeben, in der der Impuls erzeugt wurde (zum Beispiel ein Echo, das durch Klatschen in einem Tunnel entsteht).

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 giggeln) Beispiel an.

Wir können Audio auch mithilfe eines Panner-Knotens positionieren. Ein Panner-Knoten—PannerNode—erlaubt es uns, einen Quellkegel sowie Positions- und Richtungselemente zu definieren, alles im 3D-Raum, definiert durch 3D-kartesische Koordinaten.

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 niedrigem Niveau mit JavaScript zu manipulieren. Dies kann nützlich sein, wenn Sie eigene Audiocodecs erstellen möchten.

Bibliotheken existieren derzeit für die folgenden 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 Cube Beispiel
• Faltungseffekte in Echtzeit

• Manipulieren von Video mit Canvas
• HTML playbackRate erklärt
• Verwendung der Web Audio API
• Grundlagen der Web Audio-Räumlichkeit
• Verwendung von Videobildern als WebGL-Textur (Sie können auch die THREE.js WebGL-Bibliothek (und andere) verwenden, um diesen Effekt zu erzielen)
• Texturen in WebGL animieren
• Entwicklung von Spielaudio mit der Web Audio API (Raumeffekte und Filter) (2012)

• Die <audio> und <video> Elemente
• Die HTMLMediaElement API
• Das <canvas>-Element
• Web Audio API
• AudioContext
• Weitere Informationen zu Räumlichem Audio
• Webmedien-Technologien