JSFiddle - React, Tailwind, and code Playground

HTML

<div class="audio">
   <p>Звук-1!</p>
   <audio src="4824354" type="audio/mpeg"></audio>
</div>
<div class="audio">
   <p>Звук-2!</p>
   <audio src="2.mp3" type="audio/mpeg"></audio>
</div>
<div class="audio">
   <p>Звук-3!</p>
   <audio src="3.mp3" type="audio/mpeg"></audio>
</div>
<div class="audio">
   <p>Звук-4!</p>
   <audio src="4.mp3" type="audio/mpeg"></audio>
</div>

CSS

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

JavaScript

var audio = new Audio() ;
[].forEach.call(document.querySelectorAll('.audio'), function(item) {
        item.addEventListener('click', function() {
        var path = 'http://seo-payeer.ru/audio/messej';
        var audioName = item.querySelector('audio').getAttribute('src');
        audio.pause();
        var fullPath = path+audioName;
        audio.src = fullPath;
        audio.play();
        });

    });