Using HTML5 Audio API abilities in HTML5 Video API player

Question

This widget allows you to use the HTML5 Audio API to detect the wavelength amplitude of an audio file. On this page, http://codepen.io/datanity/pen/gaweb you will see a dot that changes color, as evidence of this detection.

I am trying to keep this amplitude detection ability, but instead of using a .wav file, using a video file.

If on line 65, If you change out the audio.src = '...' with the below .mp4 instead of the current .wav, then the .mp4's audio will play, the circle will still change color according to amplitude, but the video visual itself will not be visible.

//9a27bbc586dd80f4a734-4d0355cf9e89be09aa440f2192ff2da0.r28.cf1.rackcdn.com/exam-speaking-test-talk-about-yourself.mp4 (example mp4 for convenience)

My question is: Is it possible to keep the benefits from the HTML5 Audio API as shown in this example, but at the same time also use the HTML5 Video API, so you can see the video too.

Answer 1

Yes. Just change the audio element to video element. Here is the modified code: http://codepen.io/anon/pen/phKuF

  var vid = document.createElement('video'); //use video instead of audio
  vid.src = 'http://9a27bbc586dd80f4a734-4d0355cf9e89be09aa440f2192ff2da0.r28.cf1.rackcdn.com/exam-speaking-test-talk-about-yourself.mp4'; //video file
  vid.controls = true;
  vid.preload = 'auto';