0

Tenho o seguinte trecho de código:

var musica_atual = '';
var capasplit = '';

function checaURL(endereco){

    var http = new XMLHttpRequest();

    http.open('HEAD', endereco, false);
    http.send();

    return http.status != 404;

}   

// Atualiza os nomes das musicas
function atualiza_nome_musica() {
    $.ajax({
        url : 'http://somdomato.com:8000/stats?sid=1&json=1',
        dataType : 'jsonp',
        timeout : '4000',
        success: function(data) {
            if (data && data.songtitle) {
                musica_atual = data.songtitle || '';
                capasplit = musica_atual.split('-');

                // testa se tem locutor ao vivo
                if (musica_atual.substr(0, 7) === 'Ao Vivo') {
                    $('#pedidos_ativos').hide();
                    $('#pedidos_desativados').show();
                    $('.aovivo').show();
                    $('.proximas').hide();

                    // busca foto do locutor
                    var aux = musica_atual.split('-');

                    if (aux[1]) {
                        var nome_locutor = $.trim(aux[1]);
                        var musica_limpa2 = musica_atual.substr(musica_atual.indexOf("-") + 1);
                        var musica_atual = musica_limpa2.substr(musica_limpa2.indexOf("-") + 1);

                        $('#foto_locutor').attr('src', 'img/locutores/'+nome_locutor+'.jpg').load(function() {
                            $(this).show();
                        });
                    }
                } else {
                    $('.aovivo').hide();
                    $('.proximas').show();
                    $('#pedidos_ativos').show();
                }

                    $('#nome_musica').html( musica_atual );
                    $('#nome_locutor').html( nome_locutor );
            }
        }
    });     

    if (capasplit[0] != '') {
        $.getJSON("https://ajax.googleapis.com/ajax/services/search/images?callback=?", {
            q: '"' + capasplit[0] + '"',
            v: '1.0'
        }, function(data) {
            capa_nova = data.responseData.results[0].url;

            if (checaURL(capa_nova)) {
                $('#capa_musica').html('<img src="' + data.responseData.results[0].url + '">');
            } else {
                $('#capa_musica').html('<img src="/img/player/violao.png">');
            }

        });
    } else {
        $('#capa_musica').html('<img src="/img/player/violao.png">');
    }

}

atualiza_nome_musica();
setInterval(atualiza_nome_musica, 10000);

Tudo funciona perfeito, o problema é que buscar uma nova capa a cada 10 segundos gera um certo LAG e algumas pessoas tem reclamado que a rádio fica travando.

E a função checaURL está gerando este erro: XMLHttpRequest cannot load http://www.cottagespot.com/images/no-image-large.png. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://somdomato.com' is therefore not allowed access.

Como posso evitar que isso aconteça?

2 Respostas 2

1

@Lucas, infelizmente você não pode usar CORS para verificar se a URL da imagem existe. Neste caso você terá de substituir o seguinte trecho do seu codigo:

capa_nova = data.responseData.results[0].url;
if (checaURL(capa_nova)) {
    $('#capa_musica').html('<img src="' + data.responseData.results[0].url + '">');
} else {
    $('#capa_musica').html('<img src="/img/player/violao.png">');
}

pelo o seguinte:

var capa = document.getElementById("capa_musica");
var capa_nova = data.responseData.results[0].url;
var capa_default = "/img/player/violao.png";

capa.src = capa_default;
var img_nova = new Image();
img_nova.onload = function() {
    capa.src = img_nova.src;
}
img_nova.src = capa_nova;

Note que neste caso não estou adicionando um novo <img>, então o ID #capa_musica deve pertencer a uma capa já existente.

No exemplo acima, o script está sempre atribuindo a imagem padrão a tag <img id="capa_musica">, caso consiga carregar a imagem obtida pelo google, ele vai atualizar o src da <img id="capa_musica">.

var capa = document.getElementById("capa");
var imgURL = "http://3.bp.blogspot.com/-F7KGPjHrFP4/TvitGj30SJI/AAAAAAAADpQ/j-gyevUaevc/s1600/capa.jp";

window.setTimeout(function () {
    var img = new Image();
    img.onload = function() {
        capa.src = img.src;
    }
    img.src = imgURL;
}, 1000);
#capa {
    width: 250px;
    height: 250px;    
}
<img id="capa" />

2
  • Amigo, desde já muito obrigado pela resposta, vou testar e posto aqui o resultado. Commented 16/04/2015 às 2:55
  • Funcionou! Obrigado!!! Commented 1/08/2016 às 16:07
1

Esse erro gerado pelo XMLHttpRequest informa que você não pode fazer a requisição no domínio informado, no caso, cottagespot.com, esse é por padrão o funcionamento da web, só é possível fazer requisições em seu próprio domínio ou em domínios que tenham liberado acesso externo, ou para outros IPs ou para acesso global, no caso, o responsável pelo site deve liberar o acesso para seu domínio ou fornecer uma API para consulta.

1
  • levando em conta que ele está pergando uma imagem aleatoria no Google. acho dificil ele conseguir usar CORS para baixar as imagens. Commented 6/03/2015 às 12:48

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .