How do I create a javascript function to filter audio rss (podcast) for a project?

1

I have a question about how to create a function where I can filter audio (.mp3), with a maximum of 5 audios in the feed.

And audio title from the RSS feed of the CBN podcast: link

Well, in this case I managed to put the href, but I have to put it one by one, and then put the title of the podcast one by one that is pulling. I'm creating an accessibility website design for the visually impaired with audio news feeds through the podcast.

I use an audio framework with a playlist called: audiojs (kolber.github.io/audiojs) )

    
asked by anonymous 01.09.2015 / 21:35

1 answer

1

The domain of .globo.com supports Cross-Origin , depending on the header response when accessing the link :

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

Note the Access-Control-Allow-Origin:* , this means that any domain other than imagens.globoradio.globo.com can use xml, so you can use ajax for this.

  

CORS is a requirement for accessing pages from different domains with ajax eg

In the example on the link page you need to create a list to create the playlist, based on this I created a pure javascript code to use with 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>

This is just a simple example, if you want to customize more then use the link example I mentioned (using jquery).

To change the maximum limit of items to be displayed to 3 for example, go inside ajax, change the second argument of the init function:

init(ajax.responseXML, 3);

To leave unlimited, remove the last parameter:

init(ajax.responseXML);
    
17.09.2015 / 08:07