8

I'm trying to use text-to-speech on a website using HTML5 and Google Translate.

Getting speech from Google is as easy as a GET request to: http://translate.google.com/translate_tts?tl=en&q=hello

In order to play that file I'm using the audio-tag:

<audio id="speech" src="http://translate.google.com/translate_tts?tl=en&q=hello" controls="controls" autoplay="autoplay">Your browser does not support the audio element.</audio>

That works perfectly when I try to open the html file locally using Chrome 11, but doesn't work at all when I open the html from my server... It just doesn't do anything (the play button flashes for a second, but nothing happens).

You can find the file here: http://www.announcify.com/chrome/background.html

Any ideas? :)
Tom

TomTasche
  • 5,448
  • 7
  • 41
  • 67

2 Answers2

3

NodeJS equivalent for accepted answer (formulated in comments) is:

app.route("/api/tts").get(function(req,res){
      res.type('audio/mpeg');

      var text = req.query.q;
      var request = require('request');
      var url = "https://translate.google.pl/translate_tts?ie=UTF-8&q=" + text + "&tl=en&total=1&idx=0&client=t&prev=input";
      request.get(url).pipe(res);
  });

Client should send url-encoded text as a query param q, e.g. host/api/tts?q=Hello

Piotr Sobczyk
  • 6,443
  • 7
  • 47
  • 70
  • 2
    I'm doing this way as well, however the problem with this method is that now your bandwidth increases. Instead of the client requesting directly from google, the client requests from your server which filters through google. Is there anyway around this? Can an angular.js client send a request with the proper headers? – Rocky Pulley Feb 22 '15 at 22:08
2

Make sure your rel tags are set up correctly. There's a possibility that Google has a cross domain protection.

MKN Web Solutions
  • 40
  • 3
  • I've already tried `rel=noreferrer`. No success either... Is that what you mean? – TomTasche May 04 '11 at 15:06
  • Try the link in other browsers (Firefox / IE / Safari) see if any of those works, that way you can pinpoint a bit more to find the root cause. – MKN Web Solutions May 04 '11 at 15:07
  • Doesn't work on Firefox either. :/ Unfortunately I'm not able to test it on any other browsers because I'm running Ubuntu... – TomTasche May 04 '11 at 15:09
  • 7
    I've gone ahead and tested, all browsers do-fail. Here's what will most likely work: create a local php file (and upload to your server ofcourse) so that your tag's src="audio.php". Then, within the audio.php file, set that php doc to file_get_contents of the google url; you may need to set the headers to audio/mpeg. That should do the trick. – MKN Web Solutions May 04 '11 at 16:02
  • 6
    Wow! It works! Thank you very much. :) PHP Code: `$voice = file_get_contents('http://translate.google.com/translate_tts?tl=en&q=hello'); echo $voice;` – TomTasche May 04 '11 at 18:06
  • Does this still work? I have it working from localhost, but not on my server. file_get_contents returns FALSE – rewolf Oct 27 '11 at 11:15
  • @TomTasche Thanks, this works great in Firefox and Chrome yet for some reason it's not working in Safari (8.0). Any thoughts on why that may be? Perhaps a particular header needs to be passed along to the file_get_contents call? – Daniel Sposito Jul 24 '15 at 11:29