Playing remote audio (from Google Translate) in HTML5 on a server

Question

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

Beria

Answer 1

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

Jehiel

I've already tried rel=noreferrer. No success either... Is that what you mean? – Beria

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. – Jehiel

Doesn't work on Firefox either. :/ Unfortunately I'm not able to test it on any other browsers because I'm running Ubuntu... – Beria

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. – Jehiel

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; – Beria

Does this still work? I have it working from localhost, but not on my server. file_get_contents returns FALSE – Jacintojack

@Beria 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? – Displeasure

Answer 2

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

Mullane

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? – Ozonize