van an nguyen

Working with streamed content

Working with streamed content

 Bookmark this page

Live coding video: working with streamed content

(Caption will be displayed when you start playing the video.)
0:00 / 5:12

Press UP to enter the speed menu then use the UP and DOWN arrow keys to navigate the different speeds, then press ENTER to change to the selected speed.

Speed 0.75x

Click on this button to mute or unmute this video or press UP or DOWN buttons to increase or decrease volume level.

Maximum Volume.

Downloads and transcripts

Video

Download video file

Transcripts

Working with streamed content: the MediaSourceElement node

In the previous lesson, we encountered the MediaElementSource node that is used for routing the sound from a <video> or <audio>element stream. The above video shows how to make a simple example step by step, and 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&#8221;>
  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 elem is 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 the MediaElementSource node. Adding them in the audio graph will enable us to change the sound in many different ways.

Leave a comment