Google Translate Text-To-Speech

Messing with Text-to-Speech UI.

HTML

<div id="mainContainer">
    <div id="inputBlock">
        <button onclick='submitTranslation()'>Submit</button>
    </div>
    <div id="audioBlock">
        <audio id="audioElement" controls="controls">
            <source id="audioSource" src="https://translate.google.com/translate_tts?ie=UTF-8&q=You%20came%20on%20my%20face.&tl=en&total=1&idx=0&textlen=25&tk=848754&client=t&ttsspeed=2" type="audio/mpeg"></source>Your browser does not support the audio element.</audio>
    </div>
</div>

CSS

html, body {
    width: 100%;
}
#mainContainer {
    margin: 0 auto;
    width:35%;
}

JavaScript

function submitTranslation() {

    var audioElement = document.getElementById('audioElement');
    var audioSource = document.getElementById('audioSource');

    audioElement.src = 'https://translate.google.com.vn/translate_tts?ie=UTF-8&q=nama&tl=id&client=tw-ob';

    audioElement.pause();
    audioElement.load();
    audioElement.play();
}