JSFiddle - React, Tailwind, and code Playground

HTML

https://googlechrome.github.io/samples/audio/techno.wav <br />
https://streaming.kansaspublicradio.org:8001/mp3/First_0713886.mp3 <br />
<br />

<audio id="music"></audio>
<button id="play" >Play!</button>
<br />

<!--
<audio controls>
  <source src="https://streaming.kansaspublicradio.org:8001/mp3/First_0713886.mp3" type="audio/mpeg" crossOrigin="anonymous">
</audio>
-->

JavaScript

var audioElement = document.querySelector('#music');
audioElement.crossOrigin = "anonymous"; // CORS access restriction. Worth a shot but no dice
audioElement.type = "audio/mpeg"; // just in case? idk
audioElement.src = "http://novazz.ice.infomaniak.ch/novazz-128.mp3"; // "https://streaming.kansaspublicradio.org:8001/mp3/First_0713886.mp3";


function startPlayback() {
  // .play() is a Promise
  playPromise = audioElement.play();
  if (playPromise == undefined) {
      return;
  }
  playPromise.then(function(){
      console.log('yay!')
  }).catch(function(err) {
    // Automatic playback failed.
    // Show a UI element to let the user manually start playback.
        console.log('Error: ' + err);
  });
}
  
var playButton = document.querySelector('#play');
playButton.addEventListener('click', startPlayback);