Soundmanager2 не загружает звук из google translate

Question

Я хочу поговорить с текстом; Я могу получить аудио-файл (mp3) из google translate tts, если я ввожу правильно отформатированный URL-адрес в браузере.

Но если я попытаюсь создать его, я вижу только 404-ошибку в firebug.

Я использую это, но он не:

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

Я предварительно принес фиксированные voiceprompts с Wget, поэтому они как местные mp3-файлы на том же веб-сервере, что и страница. Но я хотел бы сказать динамическое приглашение.

Answer 1

Несмотря на то, что вы видите это как ошибку 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! 
}); 

С уважением и удачи!

Answer 2

Я вижу, что это было задано давно, но я пришел к аналогичной проблеме, и мне удалось заставить его работать для Chrome и Firefox, но с помощью Audio Tag.

Вот демонстрационная страница Я сделал

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 не работает с этим хака, некоторое время в в будущем я могу попытаться исправить это