HTML5 speech input and Google Translate text-to-speech, problem in Chrome

I'm creating a voice/text-memo web application. Here: http://gustavstromberg.se/sandbox/html5/localstorage/ look at its source (very short, most of it is css)

This is:

• Voice recognition, works only in chrome as far as I know.
• Local Storage, to store notes as text.
• Google Translate text-to-speech.

Everything works, but in different browsers. The voice input works perfect, only in chrome. The text-to-speech works in safari.

To dynamically load the memo into the audio>source element i use:

$("#spokenmemory").html("<source src='http://translate.google.com/translate_tts?tl=en&q="+localStorage['memory']+"' />");

(the localStorage['memory'] contains my stored text memo)

To play my recently saved memo with googles text-to-speech-function I use:

$("#listenplay").click(function(){
    $("#spokenmemory")[0].play();
});

(spokenmemory is the id-attribute of my audio-tag)

This does'nt work to play in chrome, but if I visit the translation link (example: http://translate.google.com/translate_tts?tl=en&q=Japan, and m开发者_运维技巧y text-memo is "Japan") in a separate browser-tab and then return to my site and reload the page (with the same text-memo "Japan" saved), the playback works. How strange, and annying!

Has anyone any idea of this strange behaviour?

It is because google restricts certain types of requests to prevent the service from being overloaded. So the audio file is not fetched when your browser tries to fetch it. Once you visit the translation link, the audio file is fetched and is cached which is why the playback works (provided the text-memo is same). This has been my observation but I'm not very sure.

When I used CURL to fetch the file, this is what I got in response:

403. That’s an error.

Your client does not have permission to get URL /translate_tts?q=hello from this server.

I tried hard Gustav, and this is what I found after a bit of research and testing.

It seems Chrome is having trouble streaming mp3 (the format google returns). The only solution I can imagine is getting the file (cURL?) to your server and then present it to the user. I assume when Google releases the official API, there will also be some sort of a format option.

http://code.google.com/p/chromium/issues/detail?id=45152

http://www.trygve-lie.com/blog/entry/html_5_audio_element_and (yes, the play button is the same color as the background, funky)