JSFiddle - React, Tailwind, and code Playground

by Baliga

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="play_btn" style="height:50px;width:75px;background-color:#eee;margin:10px;padding:5px">Audio 1
<audio src="https://od.lk/s/NDBfNzMxMjkwNzhf/230807_Venly%20Testimonial_1X1_V1.mp3"></audio>
<img src="https://uploads-ssl.webflow.com/5f28f6242b5cee6e96d76336/650172f6e3d1f441fee23ef2_PLAY.svg">
</div>

<div class="play_btn" style="height:50px;width:75px;background-color:#eee;margin:10px;padding:5px">Audio 2
<audio src="https://od.lk/s/NDBfNzMxNDEwNjZf/230713_Nextech%20Testimonial_1X1_V2.mp3"></audio>
<img src="https://uploads-ssl.webflow.com/5f28f6242b5cee6e96d76336/650172f6e3d1f441fee23ef2_PLAY.svg">
</div>

JavaScript

$(document).ready(function() {
     $('.play_btn').click(function() {

       var audioUrl = $(this).find('audio').attr('src');
       var audio = $(this).find('audio').get(0);
       audio.src = audioUrl;

       $('audio').not(this).each(function() {
         this.pause(); // Stop playing 
       });
       $('.play_btn').each(function() {
         $(this).find('img').attr('src', 'https://uploads-ssl.webflow.com/5f28f6242b5cee6e96d76336/650172f6e3d1f441fee23ef2_PLAY.svg');
       });

       if ($(this).attr('playing') == "true") {
         $(this).attr('playing', "false")
         audio.pause();
         $(this).find('img').attr('src', 'https://uploads-ssl.webflow.com/5f28f6242b5cee6e96d76336/650172f6e3d1f441fee23ef2_PLAY.svg');

       } else {
         audio.play();
         $(this).attr('playing', "true")
         $(this).find('img').attr('src', 'https://uploads-ssl.webflow.com/5f28f6242b5cee6e96d76336/650172f6c69af14f4ea774d3_PAUSE.svg');
       }

     });
   });