JSFiddle - React, Tailwind, and code Playground

by kelvin88degrees

HTML

<button id="btn_1">listen</button><br>
<video id="vid" crossOrigin='anonymous' src="http://vjs.zencdn.net/v/oceans.mp4" loop autoplay></video>

 <audio controls="controls" class="full-width" preload="metadata">
  <source src="audioCtx.destination" type="audio/mp3">
</audio>

CSS

video {  height: 120px;}

JavaScript

var vid = document.getElementById('vid');

var audioCtx = new AudioContext();
var gainNode = audioCtx.createGain();
var v1_src = audioCtx.createMediaElementSource(vid);

gainNode.connect(audioCtx.destination);

btn_1.onclick = function() {
  var playing = this.textContent.indexOf('listen') < 0;
  if (playing) {
    v1_src.disconnect();
    this.textContent = this.textContent.replace('mute', 'listen');
  } else {
    v1_src.connect(gainNode);
    this.textContent = this.textContent.replace('listen', 'mute');
  }
}