macpit/index.html

## index.html
<!doctype html>
<html lang="en" data-bs-theme="dark">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      .video-responsive video {
          position: relative;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
      }
    </style>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/hls.js/latest/hls.js"></script>
    <script src="../static/js/web-audio-peak-meter-3.1.0.min.js"></script>

    <div class="video-responsive">
      <video controls id="video" crossorigin="anonymous"></video>
    </div>

    <div id="peak-meter" style="height: 72px"></div>
    <p>The web audio API context is <span id="ctx-status">loading</span>. <button id="ctx-button">Loading</button></p>


  <script>
    let config = {
      autoStartLoad: true,
      debug: false,
      enableWorker: false
    }
    let video = document.getElementById('video');

      if(Hls.isSupported()) {
          let hls = new Hls(config);
          hls.loadSource('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8');
          hls.attachMedia(video);
          hls.on(Hls.Events.MANIFEST_PARSED,function() {
            video.play();
          });
      }
      else if (video.canPlayType('application/vnd.apple.mpegurl')) {
        video.src = 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8';
        video.addEventListener('canplay', function () {
          video.play();
        });
      }

      const audioCtx = new AudioContext();
      const ctxStatus = document.getElementById('video');

      setInterval(() => {
        ctxStatus.innerText = audioCtx.state;
        if (audioCtx.state === 'suspended') {
          buttonElement.innerText = 'Resume';
        } else {
          buttonElement.innerText = 'Suspend';
        }
      }, 100);

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

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

    </script>
  </body>
</html>
	<!doctype html>
	<html lang="en" data-bs-theme="dark">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	.video-responsive video {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}
	</style>
	</head>
	<body>
	<script src="https://cdn.jsdelivr.net/hls.js/latest/hls.js"></script>
	<script src="../static/js/web-audio-peak-meter-3.1.0.min.js"></script>

	<div class="video-responsive">
	<video controls id="video" crossorigin="anonymous"></video>
	</div>

	<div id="peak-meter" style="height: 72px"></div>
	<p>The web audio API context is <span id="ctx-status">loading</span>. <button id="ctx-button">Loading</button></p>


	<script>
	let config = {
	autoStartLoad: true,
	debug: false,
	enableWorker: false
	}
	let video = document.getElementById('video');

	if(Hls.isSupported()) {
	let hls = new Hls(config);
	hls.loadSource('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8');
	hls.attachMedia(video);
	hls.on(Hls.Events.MANIFEST_PARSED,function() {
	video.play();
	});
	}
	else if (video.canPlayType('application/vnd.apple.mpegurl')) {
	video.src = 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8';
	video.addEventListener('canplay', function () {
	video.play();
	});
	}

	const audioCtx = new AudioContext();
	const ctxStatus = document.getElementById('video');

	setInterval(() => {
	ctxStatus.innerText = audioCtx.state;
	if (audioCtx.state === 'suspended') {
	buttonElement.innerText = 'Resume';
	} else {
	buttonElement.innerText = 'Suspend';
	}
	}, 100);

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

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

	</script>
	</body>
	</html>