JSFiddle - React, Tailwind, and code Playground

by Rashit1122233

HTML

<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>

CSS

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

.test>p {
  padding: 20px;
  color: red;
}

JavaScript

/* var audio = new Audio(); */
var my_media = null;
var isplay = false;
my_media = new Audio();


var blocks = document.getElementsByClassName('test');
    for(var i = 0; i < blocks.length; i++) {
    var block = blocks[i];

    block.onclick = function() {
    changeColor(blocks, 'blue');
         var audioName = this.querySelector('audio').getAttribute('src');
        // my_media = new Audio(audioName);
        my_media.src = audioName;
         if (isplay) {

              //Its playing...do your job
              my_media.pause();
              isplay = false;
							my_media.play();
          } else {
          
              //Not playing...maybe paused, stopped or never played.
                  //      playAudio(audioName);
                  my_media.play();
                  isplay = true;
          }
         
       

   }//конец функции
}//конец цикла
function changeColor(coll, color){
   
    for(var i=0, len=coll.length; i<len; i++)
    {
        coll[i].style["background-color"] = color;
    }
}