63

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

http://translate.google.com/translate_tts?tl=en&q=This%20is%20just%20a%20test

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:

<audio id="audiotag1" src="audio/example.wav" preload="auto"></audio>

<script type="text/javascript">
    function play() {
        document.getElementById('audiotag1').play();
    }
</script>

How can I do this?

7 Answers 7

167

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');
window.speechSynthesis.speak(msg);

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

6
  • 1
    The great thing about the HTML5 Speech Synthesis is that you can adjust the voice pitch, fluctuation, etc Nov 15, 2014 at 3:01
  • 1
    Supported by Safari, IE?
    – Jasper
    May 5, 2016 at 13:34
  • You should add properties such as pitch, rate, speed, and etc.
    – user8903269
    Mar 15, 2018 at 0:17
  • @Rejaul Works in Chrome 76 Jul 29, 2019 at 18:43
  • This works on Chrome, Firefox, Edge, Opera and not on IE
    – Nanju
    Mar 18, 2020 at 5:44
29

Here is the code snippet I found:

var audio = new Audio();
audio.src ='http://translate.google.com/translate_tts?ie=utf-8&tl=en&q=Hello%20World.';
audio.play();
6
  • 3
    It seems that if you remove the 'dot' at the end it works fine, otherwise it's not playing the sound.
    – Diego
    Sep 17, 2013 at 15:53
  • 5
    Keep in mind that Google Translate has a limit of ~100 letters.
    – niutech
    Jan 8, 2014 at 1:25
  • 8
    It seems that Google will ban requests with a Referrer in the HTTP header. Is there a way to bypass that issue?
    – jichi
    Jan 31, 2014 at 20:03
  • @jichi Take a look on this answer and comments to this answer. Aug 3, 2014 at 7:13
  • 19
    As of today this doesn't seem to be working any more; I get 302 and then 403.
    – icedwater
    Jan 28, 2016 at 13:59
21

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';
  speechSynthesis.speak(msg);
}

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.

2
  • 1
    are you the same user as the JudahRR who wrote say.js? If so, you should disclose that affiliation. Also, probably no need to consume an external library for a 10 line function that just consumes the browser's native API anyway and doesn't need all of the default settings.
    – KyleMit
    Dec 23, 2018 at 1:01
  • 1
    As this uses the google voices, is there any way to load other languages, like Danish? I tried 'da' and 'da-DK' but she still spoke English. I could use the other solutions here, but this options seem like the easiest one. Apr 7, 2021 at 0:51
15

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

<script src='https://code.responsivevoice.org/responsivevoice.js'></script>

<input onclick="responsiveVoice.speak('This is the text you want to speak');" type='button' value='🔊 Play' />
1
  • 4
    Important note here: Although this has interesting immediate results, it is using their API via https://code.responsivevoice.org/getvoice.php to generate voices and send them back as rendered audio. Their service is however not free for non commercial projects.
    – Jankapunkt
    Sep 5, 2019 at 10:50
8

I don't know of Google voice, but using the javaScript speech SpeechSynthesisUtterance, you can add a click event to the element you are reference to. eg:

const listenBtn = document.getElementById('myvoice');

listenBtn.addEventListener('click', (e) => {
  e.preventDefault();

  const msg = new SpeechSynthesisUtterance(
    "Hello, hope my code is helpful"
  );
  window.speechSynthesis.speak(msg);

});
<button type="button" id='myvoice'>Listen to me</button>

7

The below JavaScript code sends "text" to be spoken/converted to mp3 audio to google cloud text-to-speech API and gets mp3 audio content as response back.

 var text-to-speech = function(state) {
    const url = 'https://texttospeech.googleapis.com/v1beta1/text:synthesize?key=GOOGLE_API_KEY'
    const data = {
      'input':{
         'text':'Android is a mobile operating system developed by Google, based on the Linux kernel and designed primarily for touchscreen mobile devices such as smartphones and tablets.'
      },
      'voice':{
         'languageCode':'en-gb',
         'name':'en-GB-Standard-A',
         'ssmlGender':'FEMALE'
      },
      'audioConfig':{
      'audioEncoding':'MP3'
      }
     };
     const otherparam={
        headers:{
           "content-type":"application/json; charset=UTF-8"
        },
        body:JSON.stringify(data),
        method:"POST"
     };
    fetch(url,otherparam)
    .then(data=>{return data.json()})
    .then(res=>{console.log(res.audioContent); })
    .catch(error=>{console.log(error);state.onError(error)})
  };
2
  • 2
    this is the only answer that answers the question exactly
    – Sam
    Feb 11, 2022 at 19:38
  • This answer is great, but how should I decode the given data, and how to use it Jun 12, 2022 at 12:23
3

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

<!doctype HTML>
<head>
<title>MY Echo</title>
<script src="http://code.responsivevoice.org/responsivevoice.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.1/css/font-awesome.min.css" />
<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%;
    }
</style>

Speech to text converter in JS 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';
            speechRecognizer.start();
            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;
                        console.log(speechresult);
                        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!';
        }
    }
</script>
</body>

</html>
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.