The domain of .globo.com supports Cross-Origin, according to the header’s response when accessing the address 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 the Access-Control-Allow-Origin:*, this means that any domain other than imagens.globoradio.globo.com you can use xml, so you can use ajax for this.
CORS is a requirement to access pages of different domains with ajax for example
In the example on the page http://kolber.github.io/audiojs/demos/test6.html it is necessary to create a playlist with to create the playlist, based on this I created a code in pure javascript 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 use the example of the link I mentioned (which uses jquery).
To change the maximum limit of items to be displayed to 3 for example, go inside ajax, change the second argument of the function init:
init(ajax.responseXML, 3);
To leave no limit remove the last parameter:
init(ajax.responseXML);
)
could simplify the explanation, not understood very well, you want to filter/download 5 audios from the CBN podcast ?
– Thiago Friedman
Exactly,Thiago. I want to filter the audio from the cbn podcast. What should I do ? Thank you. Doubt ,look at the audio framework I put in the question above. in the playlist part.
– Carlos Henrique
I got it Carlos, I’ve never really done it, but I’ll see if I can get something.
– Thiago Friedman
thanks,Thiago. Look I found a feature that I am currently trying to work to create this filter would google feed API. This already thank you.
– Carlos Henrique
really from what I saw I think this would be the best recuros Carlos
– Thiago Friedman
Okay, Thiago. I see it,.
– Carlos Henrique
Good evening, I wonder if the answer helped you? If not, inform might have had some doubt in the use of it.
– Guilherme Nascimento
Good evening,helped a lot.But I have a new challenge regarding the podcast how can I play the xml file, in a database (remembering that the function that pulls Feed is Ajax) to create a history of these news, and the player access this database, is plays the news.
– Carlos Henrique