JSFiddle - React, Tailwind, and code Playground

by max zwart

HTML

<a onclick="myAudioFunction('a')" style="cursor:pointer;" title="Facebook" target="_blank">
<img src="https://d2fi4ri5dhpqd1.cloudfront.net/public/resources/social-networks-icon-sets/circle-dark-gray/facebook.png" alt="Facebook" width="32" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: block !important;border: none;height: auto;float: none;max-width: 32px !important">
</a>

<a onclick="myAudioFunction('b')" style="cursor:pointer;" title="Vkontakte" target="_blank">
          <img src="https://d2fi4ri5dhpqd1.cloudfront.net/public/resources/social-networks-icon-sets/circle-dark-gray/[email protected]" alt="Vkontakte" title="Vkontakte" width="32" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: block !important;border: none;height: auto;float: none;max-width: 32px !important"/>
</a>
        
<a onclick="myAudioFunction('c')" style="cursor:pointer;" title="Vkontakte" target="_blank">
          <img src="https://d2fi4ri5dhpqd1.cloudfront.net/public/resources/social-networks-icon-sets/circle-dark-gray/[email protected]" alt="Vkontakte" title="Vkontakte" width="32" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: block !important;border: none;height: auto;float: none;max-width: 32px !important"/>
</a>
 
<script>
     var aAudio = new Audio('a.mp3');
     var bAudio = new Audio('b.mp3');
     var cAudio = new Audio('c.mp3');
     
function myAudioFunction(letter) {
         if(letter == 'a') {
             aAudio.play();
         } else if(letter == 'b') {
             bAudio.play();
         } else if(letter == 'c') {
             cAudio.play();
         }
     }
</script>