Soundmanager2 не загружает звук из Google Translate

Я хочу произнести какой-нибудь текст; Я могу получить аудиофайл (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'}
 );

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


person Leif Neland    schedule 29.05.2013    source источник


Ответы (2)


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

Вот демонстрационная страница, которую я сделал

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;
}

Думаю, мне удалось обойти это ограничение. Они потенциально могут исправить этот взлом в будущем, я не знаю. Я очень надеюсь, что они не...

Вы также можете попробовать использовать Text2Speech HTML5 API, но он еще очень молод...

IE 11 не работает с этим хаком, возможно, когда-нибудь в будущем я попытаюсь это исправить.

person roy riojas    schedule 29.03.2014

Даже если вы видите это как ошибку 404, на самом деле вы сталкиваетесь с междоменным ограничением.

Некоторые из заголовков ответов из этого 404 также дадут вам представление о том, что происходит:

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

Таким образом, вы не сможете сделать это на стороне клиента, поскольку Google не позволяет (и, вероятно, никогда не позволит) вам это сделать.

Чтобы выполнить эту динамическую загрузку аудио, вам нужно обойти это ограничение x-домена, настроив прокси на вашем собственном сервере, который будет загружать любой файл, запрошенный конечным пользователем, с серверов 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!
});

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

person ditman    schedule 01.06.2013