JSFiddle - React, Tailwind, and code Playground

HTML

<div class="audio">
   <p>БЛОК-1!</p>
   <audio controls src="1.mp3" type="audio/mpeg"></audio>
</div>
<div class="audio">
   <p>БЛОК-2!</p>
   <audio controls src="2.mp3" type="audio/mpeg"></audio>
</div>
<div class="audio">
   <p>БЛОК-3!</p>
   <audio controls src="3.mp3" type="audio/mpeg"></audio>
</div>

CSS

.audio{
    display: inline-block;
    text-align:center;
    margin:10px 10px;
    width: 100px;
    height: 100px;
    background: #444;
    color: #fff;
    font-weight: bold;
    
    cursor:pointer;
}

.audio audio {
  width: 100%;
}

.audio p {
  pointer-events: none;
}
p{
  line-height: 50px;
}

JavaScript

var blocks = document.querySelectorAll('.audio');

for(var i = 0; i < blocks.length; i++) {
	blocks[i].onclick = clickHandler;
}
 
function getAudioInfo(e) {
 var data = {
    path: '/android_asset/www/audio/',
    src: e.target.children[1].src 
  };
  console.log(data);
  return data;
}

function clickHandler(e) {
	
	var data = getAudioInfo(e);
  //var local = new Media(data);
  
  //local.play();
}