JSFiddle - React, Tailwind, and code Playground

by Rashit1122233

HTML

<div class="audio">
   <p>БЛОК-1!</p>
   <audio  src="1.mp3" 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>

CSS

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



p{
  line-height: 50px;
}

JavaScript

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

    block.onclick = function() {
     //действие при клике

         var path = '/android_asset/www/audio/';
         var audioName = this.querySelector('audio').getAttribute('src');
         var fullPath = path+audioName;
         var local1 = new Media(fullPath);
         
         local1.play();

   }//конец функции
}//конец цикла