Audio Demo

A basic HTML5 audio element with a horizontal meter

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>

<audio id="the-audio" preload="metadata" crossorigin="anonymous" controls="controls">
  <source src="https://assets.rpy.xyz/testmedia/semper_fidelis.mp3" type="audio/mpeg" />
</audio>
<div id="peak-meter" style="height: 80px"></div>

Javascript code

const audioCtx = new AudioContext();
const audioElement = document.getElementById('the-audio');
const meterElement = document.getElementById('peak-meter');

const sourceNode = audioCtx.createMediaElementSource(audioElement);
sourceNode.connect(audioCtx.destination);

const buttonElement = document.getElementById('ctx-button');
buttonElement.addEventListener('click', () => {
  if (audioCtx.state === 'suspended') {
    audioCtx.resume();
  } else {
    audioCtx.suspend();
  }
});

const ctxStatus = document.getElementById('ctx-status');
setInterval(() => {
  ctxStatus.innerText = audioCtx.state;
  if (audioCtx.state === 'suspended') {
    buttonElement.innerText = 'Resume';
  } else {
    buttonElement.innerText = 'Suspend';
  }
}, 100);

const test = new webAudioPeakMeter.WebAudioPeakMeter(sourceNode, meterElement);