JSFiddle - React, Tailwind, and code Playground

by Rashit1122233

HTML

<div id="block"></div>
<div class="test">
  <p>tekst-1</p>
  <audio src="http://static1.grsites.com/archive/sounds/animals/animals001.mp3"></audio>
</div>
<div class="test">
  <p>tekst-2</p>
  <audio src="http://static1.grsites.com/archive/sounds/animals/animals002.mp3"></audio>
</div>
<div class="test">
  <p>tekst-3</p>
   <audio src="http://static1.grsites.com/archive/sounds/animals/animals003.mp3"></audio>
</div>
<div class="test">
  <p>tekst-4</p>
  <audio src="http://static1.grsites.com/archive/sounds/animals/animals023.mp3"></audio>
</div>
<div class="test">
  <p>tekst-5</p>
   <audio src="http://static1.grsites.com/archive/sounds/animals/animals008.mp3"></audio>
</div>
<div class="test">
  <p>tekst-6</p>
   <audio src="http://static1.grsites.com/archive/sounds/animals/animals011.mp3"></audio>
</div>
<div class="test">
  <p>tekst-7</p>
   <audio src="http://static1.grsites.com/archive/sounds/animals/animals014.mp3"></audio>
</div>
<div class="test">
  <p>tekst-8</p>
   <audio src="http://www.orangefreesounds.com/wp-content/uploads/2016/03/Rooster-ringtone.mp3"></audio>
</div>
<div class="test">
  <p>tekst-9</p>
   <audio src="http://audiosoundclips.com/wp-content/uploads/2011/12/Rooster.mp3"></audio>
</div>
<div class="test">
  <p>tekst-10</p>
   <audio src="http://audiosoundclips.com/wp-content/uploads/2011/12/Duckquack.mp3"></audio>
</div>
<div class="test">
  <p>tekst-11</p>
   <audio src="http://audiosoundclips.com/wp-content/uploads/2011/12/Elephanttrumpet.mp3"></audio>
</div>
<div class="test">
  <p>tekst-12</p>
  <audio src="http://audiosoundclips.com/wp-content/uploads/2012/01/Bird3.mp3"></audio>
</div>
<div class="test">
  <p>tekst-13</p>
  <audio src=""></audio>
</div>
<div class="test">
  <p>tekst-14</p>
</div>
<div class="test">
  <p>tekst-15</p>
</div>
<div class="test">
  <p>tekst-16</p>
</div>
<div class="test">
  <p>tekst-17</p>
</div>
<div class="test">
  <p>tekst-18</p>
</div>
<div class="test">
  <p>tekst-19</p>
</div>
<div class="test">
...

CSS

* .test {
  float: left;
  display: block;
  margin: 10px;
  cursor: pointer;
  background: #000;
}

.test>p {
  padding: 20px;
  color: red;
}
#block{
  min-height:20px;
}

JavaScript

$('.test audio').each(function(i,e){$(e).attr('id','track_'+(i+1))})

$('.test').click(function() {
var index =$('.test audio').index($(this).find('audio'));
  if (!$(this).find('audio')[0]||$(this).find('audio')[0].readyState===0) {
    alert('no audio source')
  } else {
    $(this).find('audio')[0].load();
    $(this).find('audio')[0].play();
     $('.test audio').each(function(){
     if(!this.paused && $('.test audio').index(this)!=index){
     this.pause();
     this.currentTime = 0;
     }else if(!this.paused && $('.test audio').index(this)==index){
     $('#block').text('Нажат блок: '+$(this).prev().text()+'; играет аудио id: '+$(this).attr('id'));
     console.log('Нажат блок: '+$(this).prev().text()+'; играет аудио id: '+$(this).attr('id'));
     }
  });
    $('.test').css('background', '#000');
    $(this).css({
      'background': '#fff000'
    });
  }
});
$('.test audio').on('ended',function(){
$('#block').empty();
$('.test').css('background', '#000');
});