1

Tenho uma duvida, referente a como cria uma função onde posso filtrar o áudio(.mp3),com uma quantidade máxima de 5 áudios do feed.

E titulo do áudio do feed RSS da parte do podcast da CBN: http://imagens.globoradio.globo.com/cbn/podcast/cardapios/tecnologia.xml

Pois,neste caso consegui colocar o href, mas tenho que coloca um a um, e depois coloca o titulo do podcast uma a um que está puxando. Estou criando um projeto de website de acessibilidade para deficiente visuais com recurso de noticias via áudio através do podcast.

utilizo uma framework de áudio com playlist chamada: audiojs(kolber.github.io/audiojs)imagem do projeto)

8
  • poderia simplificar a explicação, não entendi muito bem, você quer filtrar/baixar 5 áudios da podcast da CBN ? Commented 1/09/2015 às 20:55
  • Exato,Thiago. Quero filtrar o áudio do podcast da cbn. O que devo fazer ? Obrigado . Duvidas ,olhe a framework de audio que coloquei na pergunta acima. na parte de playlist. Commented 1/09/2015 às 22:56
  • entendi Carlos, realmente nunca fiz isso, mas vou ver se consigo algo. Commented 2/09/2015 às 13:46
  • valeu,Thiago. Olha encontrei um recurso que atualmente estou tentando trabalhar para criar esse filtro seria google feed API. Deste já agradeço. Commented 2/09/2015 às 16:36
  • realmente pelo que vi acho que esse seria o melhor recuros Carlos Commented 2/09/2015 às 18:12

1 Resposta 1

1

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:

Access-Control-Allow-Headers:origin, x-requested-with, content-type
Access-Control-Allow-Methods:PUT, GET, POST, DELETE, OPTIONS
Access-Control-Allow-Origin:*

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.

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>

Este e apenas um exemplo simples, se quiser customizar mais use o exemplo do link que citei (que usa jquery).

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);
16
  • Guilherme,Obrigado. Verifiquei seu código, e sim esta puxando o xml,mas quando rodo ele ,não vai para próxima faixa e não encontrei a parte onde eu posso reduzir o tamanho da playlist(limita-ló por exemplo:puxar só 3 notícias), pois o código ele puxa todo o xml da página. Deste já Agradeço,Obrigado. Commented 20/09/2015 às 23:55
  • @CarlosHenrique Desculpe me esqueci disto, editei a resposta, veja se ajuda.
    – Syzoth
    Commented 21/09/2015 às 1:12
  • Agora entendi que a função Ajax gerencia a filtragem do Feed,Obrigado. Mas no caso do player ir para o próximo áudio do Feed(função next),no caso do audiojs têm uma variável next será que é isso que esta faltando no código. Pois quando finaliza o player, ele não vai para o próximo audio , retorna para o mesmo, como se fosse um loop. Commented 21/09/2015 às 2:44
  • @CarlosHenrique você quer dizer no último audio?
    – Syzoth
    Commented 21/09/2015 às 2:46
  • Ele roda,quando está acabando o áudio,ele retorna no mesmo. Commented 21/09/2015 às 2:51

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 .