JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div>
<audio preload="metadata">
	<source src="https://www.html5tutorial.info/media/vincent.mp3" type="audio/mpeg">
	Your browser does not support the audio element.
</audio>
<button onClick="togglePlay()">
<img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fcdn.onlinewebfonts.com%2Fsvg%2Fimg_529968.png&f=1&nofb=1" />
</button>
</div>

CSS

img{
  height:30px;
  width:30px;
  object-fit: contain;
}
button{
    background: transparent;
    border: none;
}

JavaScript

const audio = document.querySelector('audio');
var play = false;

function togglePlay() {
	play = !play;
  if (play) {
  	audio.play();
  } else {
    audio.pause();
  }
}