JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Testing...</h1>
<h3>Live Output</h3>
<div id="output" class="output">
  <div id="content"></div>
  <div id="status"></div>
  <pre id="log"></pre>
</div>

<!--<audio id="music" src="https://googlechrome.github.io/samples/audio/techno.wav"></audio>-->
<audio id="music" src="http://streaming.kansaspublicradio.org:8000/mp3/First_0713886.mp3"></audio>
<button id="play" >Play</button>

JavaScript

var ChromeSamples = {
    log: function() {
      var line = Array.prototype.slice.call(arguments).map(function(argument) {
        return typeof argument === 'string' ? argument : JSON.stringify(argument);
      }).join(' ');

      document.querySelector('#log').textContent += line + '\n';
    },

    clearLog: function() {
      document.querySelector('#log').textContent = '';
    },

    setStatus: function(status) {
      document.querySelector('#status').textContent = status;
    },

    setContent: function(newContent) {
      var content = document.querySelector('#content');
      while(content.hasChildNodes()) {
        content.removeChild(content.lastChild);
      }
      content.appendChild(newContent);
    }
  };

function gotStream(stream) {
    window.AudioContext = window.AudioContext || window.webkitAudioContext;
    var audioContext = new AudioContext();

    // Create an AudioNode from the stream
    var mediaStreamSource = audioContext.createMediaStreamSource(stream);

    // Connect it to destination to hear yourself
    // or any other node for processing!
    mediaStreamSource.connect(audioContext.destination);
}
navigator.mediaDevices.getUserMedia({audio:true}, gotStream);
// ^^^ originally was navigator.getUserMedia(...) but wasn't working. Mozilla says this
// this is depricated and to try navigator.mediaDevices.getUserMedia(...)

function startPlayback() {
  return document.querySelector('#music').play();
}

ChromeSamples.log('Attempting to play automatically...');

startPlayback().then(function() {
  ChromeSamples.log('The play() Promise fulfilled! Rock on!');
}).catch(function(error) {
  ChromeSamples.log('The play() Promise rejected!');
  ChromeSamples.log('Use the Play button instead.');
  ChromeSamples.log(error);

  var playButton = document.querySelector('#play');
  // The user interaction requirement is met if
  // playback is triggered via a click event.
  playButton.addEventListener('click', startPlayback);
  playButton.hidden...