Using Google Text-To-Speech in Javascript

Using Google Text-To-Speech in Javascript

I need to play Google text-to-speech in JavaScript.
The idea is to use the web service:

And play it on a certian action, e.g. a button click.
But it seems that it is not like loading a normal wav/mp3 file:

How can I do this?


Solution 1:

Another option now may be HTML5 text to speech, which is in Chrome 33+ and many others.

Here is a sample:

var msg = new SpeechSynthesisUtterance('Hello World');

With this, perhaps you do not need to use a web service at all.

Solution 2:

Here is the code snippet I found:

var audio = new Audio();
audio.src ='';;

Solution 3:

You can use the SpeechSynthesisUtterance with a function like say:

function say(m) {
  var msg = new SpeechSynthesisUtterance();
  var voices = window.speechSynthesis.getVoices();
  msg.voice = voices[10];
  msg.voiceURI = "native";
  msg.volume = 1;
  msg.rate = 1;
  msg.pitch = 0.8;
  msg.text = m;
  msg.lang = 'en-US';

Then you only need to call say(msg) when using it.

Update: Look at Google’s Developer Blog that is about Voice Driven Web Apps Introduction to the Web Speech API.

Related:  In JavaScript, what happens if “delete” a property that doesn't exist?

Solution 4:

Very easy with responsive voice. Just include the js and voila!

<script src=''></script>

<input onclick="responsiveVoice.speak('This is the text you want to speak');" type='button' value='🔊 Play' />

Solution 5:

run this code it will take input as audio(microphone) and convert into the text than audio play.

<title>MY Echo</title>
<script src=""></script>
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
    body {
        font-family: verdana;

    #result {
        height: 100px;
        border: 1px solid #ccc;
        padding: 10px;
        box-shadow: 0 0 10px 0 #bbb;
        margin-bottom: 30px;
        font-size: 14px;
        line-height: 25px;

    button {
        font-size: 20px;
        position: relative;
        left: 50%;

<h4 align="center">Speech to text converter in JS</h4>
<div id="result"></div> <button onclick="startConverting();"><i class="fa fa-microphone"></i></button>
<script type="text/javascript">
    var r = document.getElementById('result');

    function startConverting() {
        if ('webkitSpeechRecognition' in window) {
            var speechRecognizer = new webkitSpeechRecognition();
            speechRecognizer.continuous = true;
            speechRecognizer.interimResults = true;
            speechRecognizer.lang = 'en-IN';
            var finalTranscripts = '';
            speechRecognizer.onresult = function(event) {
                var interimTranscripts = '';
                for (var i = event.resultIndex; i < event.results.length; i++) {
                    var transcript = event.results[i][0].transcript;
                    transcript.replace("\n", "<br>");
                    if (event.results[i].isFinal) {
                        finalTranscripts += transcript;
                        var speechresult = finalTranscripts;
                        if (speechresult) {
                            responsiveVoice.speak(speechresult, "UK English Female", {
                                pitch: 1
                            }, {
                                rate: 1
                    } else {
                        interimTranscripts += transcript;
                r.innerHTML = finalTranscripts + '<span style="color:#999">' + interimTranscripts + '</span>';
            speechRecognizer.onerror = function(event) {};
        } else {
            r.innerHTML = 'Your browser is not supported. If google chrome, please upgrade!';


Related:  Is there a way to tell knockout to wait to recalculate computed values until after the view model is defined?