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

Answer 1

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

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