<div id="page">
  <audio src="https://www.ktbbaudio.com/casts/infocus.mp3"></audio>
  <img src="https://ktbb.com/afterrush/images/jimmyfaillaplay.jpg">
  <div id="overlay">
    <svg id="play" viewbox="0 0 100 100">
      <circle cx="50" cy="50" r="50" fill="red"></circle>
      <polygon points="30 20 80 50 30 80" fill="white"></polygon>
    </svg>
    <svg id="pause" viewbox="0 0 100 100">
      <circle cx="50" cy="50" r="50" fill="red"></circle>
      <rect x="30" y="25" width="15" height="50" fill="white"></rect>
      <rect x="55" y="25" width="15" height="50" fill="white"></rect>
    </svg>
  </div>
</div>

#page{max-width:512px;}
img{width:100%; cursor:pointer;}
#overlay{margin-top:-40%;}
svg{width:16%; margin-left:42%; cursor:pointer;}
#pause{display:none;}

var p = document.querySelector("audio");

document.getElementById("play").addEventListener("click",play);
document.getElementById("pause").addEventListener("click",pause);
document.querySelector("img").addEventListener("click",play);
p.addEventListener("ended",ended);

function play(){
  p.play();
  document.getElementById("play").style.display="none";
  document.getElementById("pause").style.display="block";
}
function pause(){
  p.pause();
  document.getElementById("play").style.display="block";
  document.getElementById("pause").style.display="none";
}
function ended(){
  document.getElementById("play").style.display="block";
  document.getElementById("pause").style.display="none";
}