JSFiddle - React, Tailwind, and code Playground

by lemon kazi

HTML

<audio loop id="player1" autoplay="true" src="http://downloadmotivations.com/wp-content/themes/downloadmotivation/Dream - Motivational Audio Compilation.mp3" type="audio/mpeg">
						  
</audio>
<div id="audioplayer1">
						 <button id="pButton1" style="background: transparent;" class="play1"> 
						 	audio
						 </button>
						
</div>

JavaScript

var audio1 = document.getElementById("player1");
						var btn1 = document.getElementById("pButton1");
						var pause_hover1 = document.getElementById("pause-hover");

						var vid = document.getElementById("player1");
					   
						btn1.addEventListener("click", function(){
						   if (audio1.paused) {
						   	   audio1.play();
						 
						       btn1.classList.remove("pause1");
						       btn1.classList.add("play1");
						       pause_hover1.style.display = "none";

						   } else  {
						   	   audio1.pause();
						   	 
						       btn1.classList.remove("play1");
						       btn1.classList.add("pause1");
						       pause_hover1.style.display = "block";
						   }
						});