Подскажите как сделать такой cursor эффект при клике со звуком

$(document.body).on('click', function(e) { 
  var wave = document.createElement('div'); 
  wave.style.top = (e.pageY - 25) + "px"; 
  wave.style.left = (e.pageX - 25) + "px"; 
  wave.className = 'wave'; 
  setTimeout(function() { 
    wave.classList.add("active"); 
  }, 0); 
  wave.addEventListener("transitionend", function() { 
    wave.remove(); 
  }); 
  document.body.appendChild(wave); 
}); 
 
$(document.body).on('mouseout', function(e) { 
  cursor.style.display = 'none'; 
}); 
$(document.body).on('mousemove', function(e) { 
  cursor.style.display = 'block'; 
  cursor.style.top = (e.pageY - 10) + "px"; 
  cursor.style.left = (e.pageX - 10) + "px"; 
});

body { 
  background-color: pink; 
  width: 100vw; 
  height: 100vh; 
} 
 
* { 
  cursor: none; 
} 
 
.wave { 
  background-color: white; 
  opacity: 0.8; 
  border-radius: 50%; 
  width: 50px; 
  height: 50px; 
  transition: all 1s ease; 
  position: absolute; 
  pointer-events: none; 
} 
 
.wave.active { 
  transform: scale(3); 
  opacity: 0; 
} 
 
#cursor { 
  background-color: gray; 
  opacity: 0.8; 
  border-radius: 50%; 
  width: 20px; 
  height: 20px; 
  position: absolute; 
  pointer-events: none; 
  display: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="cursor"></div> 
<button>cllck</button>

var audio_down = document.getElementById("audio_down"); 
var audio_up = document.getElementById("audio_up"); 
audio_down.src = audio_up.src = "https://geex-arts.com/assets/audio/sounds.mp3"; 
document.onmousedown = function(){mouseSound(0, audio_down)}; 
document.onmouseup = function(){mouseSound(0.2, audio_up)}; 
function mouseSound(startCurrentTime, selectedAudio){ 
	selectedAudio.currentTime = startCurrentTime; 
	setTimeout(function(){selectedAudio.pause()}, 200); 
	selectedAudio.play(); 
}

Покликайте здесь. 
<audio id=audio_down></audio> 
<audio id=audio_up></audio>