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 = "https://streaming.kansaspublicradio.org:8001/mp3/First_0713886.mp3";
function startPlayback() {
// .play() is a Promise
return audioElement.play().then(function(x){console.log('yay!')}, function(reason){
console.log('Error: ' + reason);
});
}
var playButton = document.querySelector('#play');
playButton.addEventListener('click', startPlayback);