Audio and video manipulation

Video Manipulation

The ability to read the pixel values from each frame of a video can be very useful.

Video and Canvas

<canvas> is a useful way of drawing onto web pages; it is very powerful and can be coupled tightly with video.

The general technique is to :

1. Write a frame from the <video> element to an intermediary <canvas> element.
2. Read the data from the intermediary <canvas> element and manipulate it.
3. Write the manipulated data to your "display" <canvas>.
4. Pause and repeat.

We can set up our video player and <canvas> element like this:

<video id="my-video" controls="true" 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>

  ...

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

and manipulate them like this (in this case we are making a black and white version of the video):

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

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

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

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

    for (var i = 0; i < l; i++) {
      var 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;
  }
};  

Once the page has loaded you can call

processor.doLoad()

Video and WebGL

WebGL is a powerful API that uses canvas to (typically) render three-dimensional scenes. You can combine WebGL and the <video> element to create video textures, which means you can put video inside 3D scenes.

Playback Rate

We can also adjust the rate that audio and video plays at using an attribute of the <audio> and <video> element called playbackRate (see HTMLMediaElement). playbackRate is number that represents a multiple to be applied to the rate of playback, for example 0.5 represents half speed while 2 represents double speed.

HTML:

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

JavaScript:

var myVideo = document.getElementById('my-video');
myVideo.playbackRate = 2;

Audio Manipulation

playbackRate aside, to manipulate audio you'll typically use the Web Audio API.

Selecting an audio source

We can use the audio track of an <audio> or <video> element as a source to feed into the Web Audio API, or a plain audio buffer, or a simple sinewave/oscillator, or a stream (e.g. from WebRTC/getUserMedia). Find out exactly how to use these by reading the following pages:

• MediaElementAudioSourceNode
• AudioBufferSourceNode
• OscillatorNode
• MediaStreamAudioSourceNode

Audio Filters

The Web Audio API has a lot of different filter/effects that can be applied to audio using the BiquadFilterNode, for example:

HTML:

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

JavaScript:

var audioSource = context.createMediaElementSource(document.getElementById("my-video"));
var filter = context.createBiquadFilter();
audioSource.connect(filter);
filter.connect(context.destination);

Common filters that can be applied to nodes:

• Low Pass: Allows frequencies below the cutoff frequency to pass through and attenuates frequencies above the cutoff.
• High Pass: Allows frequencies above the cutoff frequency to pass through and attenuates frequencies below the cutoff.
• Band Pass: Allows a range of frequencies to pass through and attenuates the frequencies below and above this frequency range.
• Low Shelf: Allows all frequencies through, but adds a boost (or attenuation) to the lower frequencies.
• High Shelf: Allows all frequencies through, but adds a boost (or attenuation) to the higher frequencies.
• Peaking: Allows all frequencies through, but adds a boost (or attenuation) to a range of frequencies.
• Notch: Allows all frequencies through, except for a set of frequencies.
• Allpass: Allows all frequencies through, but changes the phase relationship between the various frequencies.

Example:

var filter = context.createBiquadFilter();
filter.type = "lowshelf";
filter.frequency.value = 1000;
filter.gain.value = 25;

Convolutions and Impulses

It's also possible to apply impulse responses to audio using the ConvolverNode. An impulse response is the sound created after a brief impulse of sound (like a hand clap). An impulse response will signify the environment in which the impulse was created (for example, an echo created by clapping your hands in a tunnel.)

Example:

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

Spatial Audio

We can also position audio using a panner node. A panner node allows us to define a source cone as well as positional and directional elements — all in 3D space defined by 3D cartesian coordinates.  

Example:

var 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);

JavaScript Codecs

It's also possible to manipulate audio at a low level using JavaScript. This can be useful should you want to create audio codecs.

Libraries currently exist for the following formats :

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

Examples

• Various Web Audio API (and other) examples
• THREE.js Video Cube example
• Convolution Effects in Real-Time

Tutorials

• Manipulating Video Using Canvas
• HTML5 playbackRate explained
• Using the Web Audio API
• Web audio spatialisation basics
• Using Video frames as a WebGL Texture (You can also the THREE.js WebGL library (and others) to achieve this effect)
• Animating Textures in WebGL
• Developing Game Audio with the Web Audio API (Room effects and filters)

Reference

• The <audio> and <video> elements
• The HTMLMediaElement API
• The <canvas> element
• Web Audio API
• AudioContext
• More info on Spatial Audio