HTML5-Audio Working with streamed content

Working with streamed content: theMediaSourceElement node

In the previous lesson, we encountered the MediaElementSource node that is useful for routing the sound from a <video> or <audio> element stream. The above video shows how to make a simple example step by step, how to setup FireFox for debugging Web Audio applications and visualize the audio graph.

Typical use:

Example at JSBin

HTML:

1. <audio id="player" controls crossorigin="anonymous" loop>
2.    <source src="http://mainline.i3s.unice.fr/mooc/guitarRiff1.mp3">
3.    Your browser does not support the audio tag.
4. </audio>

JavaScript:

1. var ctx = window.AudioContext || window.webkitAudioContext;
2. var context = new ctx();
4. var mediaElement = document.querySelector('#player');
5. var sourceNode = context.createMediaElementSource(mediaElement);
6. sourceNode.connect(context.destination); // connect to the speakers

The MediaElementSource node  is built using context.createMediaElementSource(elem), where elemis an <audio> or a <video> element.

Then we connect this source Node to other nodes. If we connect it directly to context.destination, the sound goes to the speakers with no additional processing.

In the following lessons, we will see the different nodes that are useful with streamed audio and with theMediaElementSource node. Adding them in the audio graph will enable us to change the sound in many different ways.