Soundmanager2不会从谷歌翻译加载声音

Question

我想说一些文本；如果我在浏览器中输入一个格式正确的url，我可以从谷歌翻译tts获得音频文件(Mp3)。

但是如果我尝试createSound它，我只在firebug中看到一个404-error。

我使用这个，但它失败了：

soundManager.createSound( 
  {id:'testsound', 
   autoLoad:true,
   url:'http://translate.google.com/translate_tts?ie=UTF-8&tl=da&q=testing'}
 );

我已经用wget预取了固定的语音提示，所以它们是同一台网页服务器上的本地mp3文件。但我想说的是动态提示。

Answer 1

我知道这个问题很久以前就有人问过了，但我也遇到了类似的问题，我能够让它在Chrome和Firefox上运行，但使用的是Audio标签。

这是我制作的演示页面

http://jsfiddle.net/royriojas/SE6ET/

下面是为我做这件事的代码。

var sayIt;

function createSayIt() {

    // Tiny trick to make the request to google actually work!, they deny the request if it comes from a page but somehow it works when the function is inside this iframe!

    //create an iframe without setting the src attribute
    var iframe = document.createElement('iframe');

    // don't know if the attribute is required, but it was on the codepen page where this code worked, so I just put this here. Might be not needed.
    iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-pointer-lock');
    // hide the iframe... cause you know, it is ugly letting iframes be visible around...
    iframe.setAttribute('class', 'hidden-iframe')

    // append it to the body
    document.body.appendChild(iframe);

    // obtain a reference to the contentWindow
    var v = iframe.contentWindow;

    // parse the sayIt function in this contentWindow scope
    // Yeah, I know eval is evil, but its evilness fixed this issue...
    v.eval("function sayIt(query, language, cb) { var audio = new Audio(); audio.src = 'http://translate.google.com/translate_tts?ie=utf-8&tl=' + language + '&q=' + encodeURIComponent(query); cb && audio.addEventListener('ended', cb);  audio.play();}");

    // export it under sayIt variable
    sayIt = v.sayIt;
}

我想我能够byPass那个限制。他们可能在未来修复这个黑客攻击，我不知道。我真的希望他们不要..。

您也可以尝试使用Text2Speech HTML5应用程序接口，但它仍然非常年轻……

IE 11不能解决这个问题，将来我可能会尝试修复它

Answer 2

尽管您认为这是一个404错误，但您实际上遇到了跨域限制。

来自404的一些响应头也会给你一个线索，告诉你发生了什么：

X-Content-Type-Options:nosniff
X-XSS-Protection:1; mode=block

因此，您无法在客户端执行此操作，因为Google不允许(也可能永远不会)允许您执行此操作。

为了实现音频的动态加载，您需要绕过这个x域限制，设置一个proxy on your own server，它可以从google的服务器(通过wget或其他方式)下载最终用户请求的任何文件，并输出来自google的任何数据。

我用来重现这个问题的代码：

soundManager.setup({
    url: 'swf',
    onready: function() {
        soundManager.createSound({
            id:'testsound', 
            autoLoad:true,
            url:'http://translate.google.com/translate_tts?ie=UTF-8&tl=da&q=testing'
        });
    }
});

您的代码应如下所示：

soundManager.createSound({
    id:'testsound', 
    autoLoad:true,
    url:'/audioproxy.php?ie=UTF-8&tl=da&q=testing' // Same domain!
});

致以问候并祝你好运！