JSFiddle - React, Tailwind, and code Playground

HTML

<audio src="http://icecast.omroep.nl/3fm-bb-mp3" type="audio/mpeg" preload="none"></audio>

This is the default location to starty/stop play:<br>
<main>
  <play>PLAY</play>
  <pause>PAUSE</pause>
</main>

<hr>

This is the alternative location for the controls:<br>
<article>
  <play>PLAY</play>
  <pause>PAUSE</pause>
</article>

CSS

play, pause {
	display: none;
	text-align:center;
	width: 300px;
	height: 200px;
	font-size: 100px;
	line-height:200px;
	background: #FFF;
	color: #BBB;
	cursor: pointer;
  background: yellow;
	}

article play, article pause {
	float: right;
	width: 35px;
	height: 35px;
	font-size: 20px;
	line-height:34px;
	background: #FFF;
	color: #000;
	outline: 1px solid #000;
	}

JavaScript

var myAudio = document.getElementsByTagName('audio')[0];
var play = document.getElementsByTagName('play')[0];
var pause = document.getElementsByTagName('pause')[0];


function displayControls() {
	play.style.display = "block";
}

// check that the media is ready before displaying the controls
if (myAudio.paused) {
	displayControls();
} else {
	// not ready yet - wait for canplay event
	myAudio.addEventListener('canplay', function() {
	displayControls();
	});
} 

play.addEventListener('click', function() {
	myAudio.play();
	play.style.display = "none";
	pause.style.display = "block";
});

pause.addEventListener('click', function() {
	myAudio.pause();
	pause.style.display = "none";
	play.style.display = "block";
});