Skip to main content
adicionou 51 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361

O dominio do UOL.globo.com suporta cross-origenCross-Origin, conforme a resposta do header ao acessar o endereço http://imagens.globoradio.globo.com/cbn/podcast/cardapios/tecnologia.xml:

IstoNote o Access-Control-Allow-Origin:*, isto significa que qualquer dominiodomínio diferente de imagens.globoradio.globo.com poderá usar o xml, portanto você pode usar ajax pra isto.

O dominio do UOL suporta cross-origen, conforme a resposta do header ao acessar o endereço http://imagens.globoradio.globo.com/cbn/podcast/cardapios/tecnologia.xml:

Isto significa que qualquer dominio diferente de imagens.globoradio.globo.com poderá usar o xml, portanto você pode usar ajax pra isto.

O dominio do .globo.com suporta Cross-Origin, conforme a resposta do header ao acessar o endereço http://imagens.globoradio.globo.com/cbn/podcast/cardapios/tecnologia.xml:

Note o Access-Control-Allow-Origin:*, isto significa que qualquer domínio diferente de imagens.globoradio.globo.com poderá usar o xml, portanto você pode usar ajax pra isto.

adicionou 5 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361

O dominio do UOL suporta cross-origen, conforme a resposta do header ao acessar o enderecoendereço http://imagens.globoradio.globo.com/cbn/podcast/cardapios/tecnologia.xml:

Isto significa que qualquer dominio diferente de imagens.globoradio.globo.com poderapoderá usar o xml, portanto vocevocê pode usar ajax pra isto.

CORS e um requisito necessarionecessário pra acessar paginas de diferentes dominiosdomínios com ajax por exemplo

No exemplo na pagina http://kolber.github.io/audiojs/demos/test6.html 'e necessarioé necessário criar uma lista com pra criar a playlist, com base nisto criei um codigocódigo em javascript puro pra usar com o audio.js:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="audiojs/audio.min.js"></script>
    <style type="text/css">
    audio.hide {/*oculta o player padrao do browser*/
        display: none;
    }
    </style>
</head>
<body>

<audio class="hide" controls="controls"></audio>
<ol id="playlistitems"></ol>

<script type="text/javascript">
    function retrieveData(rss, maxItens) {/*extrai dados do feed*/
        var items = rss.getElementsByTagName("item");
        var current, title;
        var playList = [];
        var j = items.length;

        if (maxItens > 0 && maxItens < j) {
            j = maxItens;
        }

        for (var i = 0; i < j; i++) {
            current = items[i].getElementsByTagName("enclosure");
            title   = items[i].getElementsByTagName("title");

            if (current.length > 0) {
                playList.push({
                    "url": current[0].getAttribute("url"),
                    "title": title[0].textContent
                });
            }
        }

        return playList;
    }

    function audioJS(items, total) {/*cria o player com audio.js*/
        var allAudios, current = 0, audio;
        allAudios = audiojs.createAll({
            "trackEnded": function() {
                current++;
                if (current < total) {
                    audio.load(items[0]items[current].getAttribute("data-href"));
                    audio.play();
                }
            }
        });

        audio = allAudios[0];
        audio.load(items[0].getAttribute("data-href"));
        audio.play();

        for (var i = 0, j = items.length; i < j; i++) {
            items[i].onclick = function() {
                audio.load(this.getAttribute("data-href"));
                audio.play();
                return false;
            };
        }
    }

    function init(data, maxItens) {/*cria os links*/
        var playList = retrieveData(data, maxItens);
        var el, li, playListItems = document.getElementById("playlistitems");

        if (playList.length > 0) {
            for (var i = 0, j = playList.length; i < j; i++) {
                li = document.createElement("li");
                el = document.createElement("a");
                el.setAttribute("href", "#");
                el.setAttribute("data-href", playList[i].url);
                el.innerHTML = playList[i].title;

                li.appendChild(el);
                playListItems.appendChild(li);
            }
        }

        if (j > 0) {
            audioJS(playListItems.getElementsByTagName("a"), j);
        }
    }

    var ajax = new XMLHttpRequest();
    var url = "http://imagens.globoradio.globo.com/cbn/podcast/cardapios/tecnologia.xml";

    ajax.open("GET", url, true);
    ajax.onreadystatechange = function () {
        if (ajax.readyState === 4) {
            if (ajax.status === 200) {/*se tudo ok envia o feed pro evento init*/
                init(ajax.responseXML, 5);//O segundo parametro limita pra 5 itens no máximo
            } else {/*se falhar ao baixar o xml entao mostra o codigo do erro*/
                alert("Erro: " + ajax.status);
            }
        }
    };
    ajax.send(null);
</script>
</body>
</html>

O dominio do UOL suporta cross-origen, conforme a resposta do header ao acessar o endereco http://imagens.globoradio.globo.com/cbn/podcast/cardapios/tecnologia.xml:

Isto significa que qualquer dominio diferente de imagens.globoradio.globo.com podera usar o xml, portanto voce pode usar ajax pra isto.

CORS e um requisito necessario pra acessar paginas de diferentes dominios com ajax por exemplo

No exemplo na pagina http://kolber.github.io/audiojs/demos/test6.html 'e necessario criar uma lista com pra criar a playlist, com base nisto criei um codigo em javascript puro pra usar com o audio.js:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="audiojs/audio.min.js"></script>
    <style type="text/css">
    audio.hide {/*oculta o player padrao do browser*/
        display: none;
    }
    </style>
</head>
<body>

<audio class="hide" controls="controls"></audio>
<ol id="playlistitems"></ol>

<script type="text/javascript">
    function retrieveData(rss, maxItens) {/*extrai dados do feed*/
        var items = rss.getElementsByTagName("item");
        var current, title;
        var playList = [];
        var j = items.length;

        if (maxItens > 0 && maxItens < j) {
            j = maxItens;
        }

        for (var i = 0; i < j; i++) {
            current = items[i].getElementsByTagName("enclosure");
            title   = items[i].getElementsByTagName("title");

            if (current.length > 0) {
                playList.push({
                    "url": current[0].getAttribute("url"),
                    "title": title[0].textContent
                });
            }
        }

        return playList;
    }

    function audioJS(items, total) {/*cria o player com audio.js*/
        var allAudios, current = 0, audio;
        allAudios = audiojs.createAll({
            "trackEnded": function() {
                current++;
                if (current < total) {
                    audio.load(items[0].getAttribute("data-href"));
                    audio.play();
                }
            }
        });

        audio = allAudios[0];
        audio.load(items[0].getAttribute("data-href"));
        audio.play();

        for (var i = 0, j = items.length; i < j; i++) {
            items[i].onclick = function() {
                audio.load(this.getAttribute("data-href"));
                audio.play();
                return false;
            };
        }
    }

    function init(data, maxItens) {/*cria os links*/
        var playList = retrieveData(data, maxItens);
        var el, li, playListItems = document.getElementById("playlistitems");

        if (playList.length > 0) {
            for (var i = 0, j = playList.length; i < j; i++) {
                li = document.createElement("li");
                el = document.createElement("a");
                el.setAttribute("href", "#");
                el.setAttribute("data-href", playList[i].url);
                el.innerHTML = playList[i].title;

                li.appendChild(el);
                playListItems.appendChild(li);
            }
        }

        if (j > 0) {
            audioJS(playListItems.getElementsByTagName("a"), j);
        }
    }

    var ajax = new XMLHttpRequest();
    var url = "http://imagens.globoradio.globo.com/cbn/podcast/cardapios/tecnologia.xml";

    ajax.open("GET", url, true);
    ajax.onreadystatechange = function () {
        if (ajax.readyState === 4) {
            if (ajax.status === 200) {/*se tudo ok envia o feed pro evento init*/
                init(ajax.responseXML, 5);//O segundo parametro limita pra 5 itens no máximo
            } else {/*se falhar ao baixar o xml entao mostra o codigo do erro*/
                alert("Erro: " + ajax.status);
            }
        }
    };
    ajax.send(null);
</script>
</body>
</html>

O dominio do UOL suporta cross-origen, conforme a resposta do header ao acessar o endereço http://imagens.globoradio.globo.com/cbn/podcast/cardapios/tecnologia.xml:

Isto significa que qualquer dominio diferente de imagens.globoradio.globo.com poderá usar o xml, portanto você pode usar ajax pra isto.

CORS e um requisito necessário pra acessar paginas de diferentes domínios com ajax por exemplo

No exemplo na pagina http://kolber.github.io/audiojs/demos/test6.html é necessário criar uma lista com pra criar a playlist, com base nisto criei um código em javascript puro pra usar com o audio.js:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="audiojs/audio.min.js"></script>
    <style type="text/css">
    audio.hide {/*oculta o player padrao do browser*/
        display: none;
    }
    </style>
</head>
<body>

<audio class="hide" controls="controls"></audio>
<ol id="playlistitems"></ol>

<script type="text/javascript">
    function retrieveData(rss, maxItens) {/*extrai dados do feed*/
        var items = rss.getElementsByTagName("item");
        var current, title;
        var playList = [];
        var j = items.length;

        if (maxItens > 0 && maxItens < j) {
            j = maxItens;
        }

        for (var i = 0; i < j; i++) {
            current = items[i].getElementsByTagName("enclosure");
            title   = items[i].getElementsByTagName("title");

            if (current.length > 0) {
                playList.push({
                    "url": current[0].getAttribute("url"),
                    "title": title[0].textContent
                });
            }
        }

        return playList;
    }

    function audioJS(items, total) {/*cria o player com audio.js*/
        var allAudios, current = 0, audio;
        allAudios = audiojs.createAll({
            "trackEnded": function() {
                current++;
                if (current < total) {
                    audio.load(items[current].getAttribute("data-href"));
                    audio.play();
                }
            }
        });

        audio = allAudios[0];
        audio.load(items[0].getAttribute("data-href"));
        audio.play();

        for (var i = 0, j = items.length; i < j; i++) {
            items[i].onclick = function() {
                audio.load(this.getAttribute("data-href"));
                audio.play();
                return false;
            };
        }
    }

    function init(data, maxItens) {/*cria os links*/
        var playList = retrieveData(data, maxItens);
        var el, li, playListItems = document.getElementById("playlistitems");

        if (playList.length > 0) {
            for (var i = 0, j = playList.length; i < j; i++) {
                li = document.createElement("li");
                el = document.createElement("a");
                el.setAttribute("href", "#");
                el.setAttribute("data-href", playList[i].url);
                el.innerHTML = playList[i].title;

                li.appendChild(el);
                playListItems.appendChild(li);
            }
        }

        if (j > 0) {
            audioJS(playListItems.getElementsByTagName("a"), j);
        }
    }

    var ajax = new XMLHttpRequest();
    var url = "http://imagens.globoradio.globo.com/cbn/podcast/cardapios/tecnologia.xml";

    ajax.open("GET", url, true);
    ajax.onreadystatechange = function () {
        if (ajax.readyState === 4) {
            if (ajax.status === 200) {/*se tudo ok envia o feed pro evento init*/
                init(ajax.responseXML, 5);//O segundo parametro limita pra 5 itens no máximo
            } else {/*se falhar ao baixar o xml entao mostra o codigo do erro*/
                alert("Erro: " + ajax.status);
            }
        }
    };
    ajax.send(null);
</script>
</body>
</html>
adicionou 452 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="audiojs/audio.min.js"></script>
    <style type="text/css">
    audio.hide {/*oculta o player padrao do browser*/
        display: none;
    }
    </style>
</head>
<body>

<audio class="hide" controls="controls"></audio>
<ol id="playlistitems"></ol>

<script type="text/javascript">
    function retrieveData(rss, maxItens) {/*extrai dados do feed*/
        var items = rss.getElementsByTagName("item");
        var current, title;
        var playList = [];
 
        for (var ij = items.length;

        if (maxItens > 0, && maxItens < j) {
            j = items.length;maxItens;
        }

        for (var i = 0; i < j; i++) {
            current = items[i].getElementsByTagName("enclosure");
            title   = items[i].getElementsByTagName("title");

            if (current.length > 0) {
                playList.push({
                    "url": current[0].getAttribute("url"),
                    "title": title[0].textContent
                });
            }
        }

        return playList;
    }

    function audioJS(items, total) {/*cria o player com audio.js*/
        var allAudios, current = 0, audio;
        allAudios = audiojs.createAll({
            "trackEnded": function() {
                current++;
                if (current < total) {
                    audio.load(items[0].getAttribute("data-href"));
                    audio.play();
                }
            }
        });

        audio = allAudios[0];
        audio.load(items[0].getAttribute("data-href"));
        audio.play();

        for (var i = 0, j = items.length; i < j; i++) {
            items[i].onclick = function() {
                audio.load(this.getAttribute("data-href"));
                audio.play();
                return false;
            };
        }
    }

    function init(data, maxItens) {/*cria os links*/
        var playList = retrieveData(data, maxItens);
        var el, li, playListItems = document.getElementById("playlistitems");

        if (playList.length > 0) {
            for (var i = 0, j = playList.length; i < j; i++) {
                li = document.createElement("li");
                el = document.createElement("a");
                el.setAttribute("href", "#");
                el.setAttribute("data-href", playList[i].url);
                el.innerHTML = playList[i].title;

                li.appendChild(el);
                playListItems.appendChild(li);
            }
        }

        if (j > 0) {
            audioJS(playListItems.getElementsByTagName("a"), j);
        }
    }

    var ajax = new XMLHttpRequest();
    var url = "http://imagens.globoradio.globo.com/cbn/podcast/cardapios/tecnologia.xml";

    ajax.open("GET", url, true);
    ajax.onreadystatechange = function () {
        if (ajax.readyState === 4) {
            if (ajax.status === 200) {/*se tudo ok envia o feed pro evento init*/
                init(ajax.responseXML, 5);//O segundo parametro limita pra 5 itens no máximo
            } else {/*se falhar ao baixar o xml entao mostra o codigo do erro*/
                alert("Erro: " + ajax.status);
            }
        }
    };
    ajax.send(null);
</script>
</body>
</html>

Pra mudar o limite máximo de itens a ser exibido para 3 por exemplo, vá dentro do ajax, altere o segundo argumento da função init:

init(ajax.responseXML, 3);

Pra deixar sem limite remova o ultimo parâmetro:

init(ajax.responseXML);
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="audiojs/audio.min.js"></script>
    <style type="text/css">
    audio.hide {/*oculta o player padrao do browser*/
        display: none;
    }
    </style>
</head>
<body>

<audio class="hide" controls="controls"></audio>
<ol id="playlistitems"></ol>

<script type="text/javascript">
    function retrieveData(rss) {/*extrai dados do feed*/
        var items = rss.getElementsByTagName("item");
        var current, title;
        var playList = [];
 
        for (var i = 0, j = items.length; i < j; i++) {
            current = items[i].getElementsByTagName("enclosure");
            title   = items[i].getElementsByTagName("title");

            if (current.length > 0) {
                playList.push({
                    "url": current[0].getAttribute("url"),
                    "title": title[0].textContent
                });
            }
        }

        return playList;
    }

    function audioJS(items, total) {/*cria o player com audio.js*/
        var allAudios, current = 0, audio;
        allAudios = audiojs.createAll({
            "trackEnded": function() {
                current++;
                if (current < total) {
                    audio.load(items[0].getAttribute("data-href"));
                    audio.play();
                }
            }
        });

        audio = allAudios[0];
        audio.load(items[0].getAttribute("data-href"));
        audio.play();

        for (var i = 0, j = items.length; i < j; i++) {
            items[i].onclick = function() {
                audio.load(this.getAttribute("data-href"));
                audio.play();
                return false;
            };
        }
    }

    function init(data) {/*cria os links*/
        var playList = retrieveData(data);
        var el, li, playListItems = document.getElementById("playlistitems");

        if (playList.length > 0) {
            for (var i = 0, j = playList.length; i < j; i++) {
                li = document.createElement("li");
                el = document.createElement("a");
                el.setAttribute("href", "#");
                el.setAttribute("data-href", playList[i].url);
                el.innerHTML = playList[i].title;

                li.appendChild(el);
                playListItems.appendChild(li);
            }
        }

        if (j > 0) {
            audioJS(playListItems.getElementsByTagName("a"), j);
        }
    }

    var ajax = new XMLHttpRequest();
    var url = "http://imagens.globoradio.globo.com/cbn/podcast/cardapios/tecnologia.xml";

    ajax.open("GET", url, true);
    ajax.onreadystatechange = function () {
        if (ajax.readyState === 4) {
            if (ajax.status === 200) {/*se tudo ok envia o feed pro evento init*/
                init(ajax.responseXML);
            } else {/*se falhar ao baixar o xml entao mostra o codigo do erro*/
                alert("Erro: " + ajax.status);
            }
        }
    };
    ajax.send(null);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="audiojs/audio.min.js"></script>
    <style type="text/css">
    audio.hide {/*oculta o player padrao do browser*/
        display: none;
    }
    </style>
</head>
<body>

<audio class="hide" controls="controls"></audio>
<ol id="playlistitems"></ol>

<script type="text/javascript">
    function retrieveData(rss, maxItens) {/*extrai dados do feed*/
        var items = rss.getElementsByTagName("item");
        var current, title;
        var playList = [];
        var j = items.length;

        if (maxItens > 0 && maxItens < j) {
            j = maxItens;
        }

        for (var i = 0; i < j; i++) {
            current = items[i].getElementsByTagName("enclosure");
            title   = items[i].getElementsByTagName("title");

            if (current.length > 0) {
                playList.push({
                    "url": current[0].getAttribute("url"),
                    "title": title[0].textContent
                });
            }
        }

        return playList;
    }

    function audioJS(items, total) {/*cria o player com audio.js*/
        var allAudios, current = 0, audio;
        allAudios = audiojs.createAll({
            "trackEnded": function() {
                current++;
                if (current < total) {
                    audio.load(items[0].getAttribute("data-href"));
                    audio.play();
                }
            }
        });

        audio = allAudios[0];
        audio.load(items[0].getAttribute("data-href"));
        audio.play();

        for (var i = 0, j = items.length; i < j; i++) {
            items[i].onclick = function() {
                audio.load(this.getAttribute("data-href"));
                audio.play();
                return false;
            };
        }
    }

    function init(data, maxItens) {/*cria os links*/
        var playList = retrieveData(data, maxItens);
        var el, li, playListItems = document.getElementById("playlistitems");

        if (playList.length > 0) {
            for (var i = 0, j = playList.length; i < j; i++) {
                li = document.createElement("li");
                el = document.createElement("a");
                el.setAttribute("href", "#");
                el.setAttribute("data-href", playList[i].url);
                el.innerHTML = playList[i].title;

                li.appendChild(el);
                playListItems.appendChild(li);
            }
        }

        if (j > 0) {
            audioJS(playListItems.getElementsByTagName("a"), j);
        }
    }

    var ajax = new XMLHttpRequest();
    var url = "http://imagens.globoradio.globo.com/cbn/podcast/cardapios/tecnologia.xml";

    ajax.open("GET", url, true);
    ajax.onreadystatechange = function () {
        if (ajax.readyState === 4) {
            if (ajax.status === 200) {/*se tudo ok envia o feed pro evento init*/
                init(ajax.responseXML, 5);//O segundo parametro limita pra 5 itens no máximo
            } else {/*se falhar ao baixar o xml entao mostra o codigo do erro*/
                alert("Erro: " + ajax.status);
            }
        }
    };
    ajax.send(null);
</script>
</body>
</html>

Pra mudar o limite máximo de itens a ser exibido para 3 por exemplo, vá dentro do ajax, altere o segundo argumento da função init:

init(ajax.responseXML, 3);

Pra deixar sem limite remova o ultimo parâmetro:

init(ajax.responseXML);
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361
Carregando