JSFiddle - React, Tailwind, and code Playground

HTML

<div class="circle animation"></div>
<span>Clicks: <a id="clicks">0</a></span>

CSS

.circle {
  width: 80px;
  height: 80px;
  border-radius: 80px;
  border: 3px solid red;
  margin: 20px;
}

@keyframes Animation {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(.8);
    }
    100% {
        transform: scale(1);
    }
}

JavaScript

var clickEl = document.getElementById("clicks");
let clicks = 0;
let previousPlayClickCount = 0; //keep the previous click count for finding the next play
let nextPlay = Math.floor(Math.random() * 10); //set next play from 0 to 9
let listDiv = document.querySelectorAll("div");

A = document.createElement('audio');
A.src = 'http://www.freesound.org/data/previews/265/265296_5003039-lq.mp3'; A.volume=0.3;

for (let div of listDiv) {
  div.addEventListener('click', () => {
    clickEl.innerText = ++clicks;
    
    //don't trigger sound after certain clicks (with random count `nextPlay`)
    if(previousPlayClickCount + nextPlay !== clicks - 1) {
    	return
    }
    
    //need to track previous click count and randomize next play again
    previousPlayClickCount = clicks;
    nextPlay = Math.floor(Math.random() * 10);
    
    div.style.animation = 'Animation 200ms linear forwards';
    setTimeout(() => {
      div.style.animation = '';
    }, 220);
    
    A.currentTime=0.09; A.play();
    
  });
}