Video Demo

A basic HTML5 video element with default meter settings

Working Example

The web audio API context is loading. Loading

HTML code

<p>The web audio API context is <span id="ctx-status">loading</span>. <button id="ctx-button">Loading</button></p>
<div class="demo-video">
  <video controls id="the-video" crossorigin="anonymous" style="width: 100%;">
    <source src="https://assets.rpy.xyz/testmedia/hoops.mp4" type="video/mp4">
    Sorry, your browser doesn't support embedded videos.
  </video>
  <div id="peak-meter" style="height: 72px"></div>
</div>

Javascript code

const audioCtx = new AudioContext();

const ctxStatus = document.getElementById('ctx-status');
const buttonElement = document.getElementById('ctx-button');

function updateAudioCtxStatus() {
  ctxStatus.innerText = audioCtx.state;
  if (audioCtx.state === 'suspended') {
    buttonElement.innerText = 'Resume';
  } else {
    buttonElement.innerText = 'Suspend';
  }
}

setInterval(updateAudioCtxStatus, 1000);

buttonElement.addEventListener('click', () => {
  if (audioCtx.state === 'suspended') {
    audioCtx.resume().then(updateAudioCtxStatus);
  } else {
    audioCtx.suspend().then(updateAudioCtxStatus);
  }
});

const videoElement = document.getElementById('the-video');
const meterElement = document.getElementById('peak-meter');
const sourceNode = audioCtx.createMediaElementSource(videoElement);
sourceNode.connect(audioCtx.destination);
const test = new webAudioPeakMeter.WebAudioPeakMeter(sourceNode, meterElement);