JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" id="say1">Hello 1</a><br/><br/>
<a href="#" id="say2">Hello 2<div id="sound2"></div></a><br/>
<a href="#" id="say3">Hello 3</a><br/><br/>
<a href="#" id="say4">Hello 4</a>

JavaScript

$('#say1').on("click", function() {
    var sound = new Audio("http://translate.google.com/translate_tts?tl=en&q=hello%20all");
    sound.play();
});

$('#say2').on("click", function() {
    var word = "hello", 
        len = word.length,
        nodeHTML,
        node;
    word = encodeURI(word);
    nodeHTML = '<audio src="http://translate.google.com/translate_tts?ie=UTF-8&q='+
        word + "&tl=en&total=1&idx=0&textlen="+len+'&client=t&prev=input" autoplay="autoplay"></audio>';    
    
   $("#sound2").html(nodeHTML);
});

$('#say3').on('click', function() {
    var audioElement = document.createElement('audio');
    audioElement.setAttribute('src', 'http://translate.google.com/translate_tts?tl=en&q=hello%20all');
    audioElement.play();
});

$('#say4').on('click', function() {
    var audioElement = document.createElement('audio');
    audioElement.setAttribute('src', 'http://translate.google.com/translate_tts?tl=en&q=hello%20all');
    audioElement.load()
    audioElement.addEventListener("load", function() { 
      audioElement.play(); 
    }, true);    
});