Multiple variations using options

This demo serves to demonstrate using multiple meters on the same page as well as showing how some of the available options can be used.

Working Example

The web audio API context is loading. Loading

Player One

Default options

Peak Clear duration

Player Two

Vertical set to true

HTML code

<p>The web audio API context is <span id="ctx-status">loading</span>. <button id="ctx-button">Loading</button></p>

<p>Player One</p>
<audio id="audio-one" preload="metadata" crossorigin="anonymous" controls="controls">
  <source src="https://assets.rpy.xyz/testmedia/semper_fidelis.mp3" type="audio/mpeg" />
</audio>
<p>Default options</p>
<div id="meter-one-a" style="height: 80px"></div>
<p>Peak Clear duration</p>
<div id="meter-one-b" style="height: 80px"></div>

<p>Player Two</p>
<audio id="audio-two" preload="metadata" crossorigin="anonymous" controls="controls">
  <source src="https://assets.rpy.xyz/testmedia/marines_hymn.mp3" type="audio/mpeg" />
</audio>
<p>Vertical set to true</p>
<div id="meter-two-a" style="height: 300px; width: 80px;"></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 audioElementOne = document.getElementById('audio-one');
const audioElementTwo = document.getElementById('audio-two');

const sourceNodeOne = audioCtx.createMediaElementSource(audioElementOne);
const sourceNodeTwo = audioCtx.createMediaElementSource(audioElementTwo);
sourceNodeOne.connect(audioCtx.destination);
sourceNodeTwo.connect(audioCtx.destination);

const elementOneA = document.getElementById('meter-one-a');
const meterOneA = new webAudioPeakMeter.WebAudioPeakMeter(sourceNodeOne, elementOneA);
const elementOneB = document.getElementById('meter-one-b');
const optionsOneB = {
  backgroundColor: '#555',
  peakHoldDuration: 2000,
};
const meterOneB = new webAudioPeakMeter.WebAudioPeakMeter(sourceNodeOne, elementOneB, optionsOneB);
const elementTwoA = document.getElementById('meter-two-a');
const optionsTwoA = {
  vertical: true,
};
const meterTwoA = new webAudioPeakMeter.WebAudioPeakMeter(sourceNodeTwo, elementTwoA, optionsTwoA);