Changes 3/4/15 - Loading Audio Urls from RSS

Today Finn and I worked on parsing urls linking to streamable LibriVox audio. We found that each book has an rss page (formatted in xml) which contains links to mp3 files for the books. We had no problem grabbing the data from the server, as this task was very similar to getting the json data on each book. jQuery also has built in support for xml parsing, but we ran into problems iterating over all the different tags returned. The mp3 files are broken up into chapters, so we would want to iterate over each element and get the link to the mp3 and other data.

Here's an example of an rss page. Firefox actually styles it, while the other browsers just display text. Click 'view source' on the page to see the actual xml. It's weird that they have so many redundant links, as each file is linked to three times: in the url attribute of the <enclosure>, <link> and <media:content> tags.  I'm assuming this is to make it compatible with the format rss readers are expecting.

I figured that a good starting place for this problem would be trying to extract the mp3 url from each <enclosure> tag. This is where we started running into problems. Given an xml file looking like this:

	<section>
	<enclosure url="a" />
	<other_tag>
	<enclosure url="b" />
	</other_tag>
	</section>

view raw feed.xml hosted with ❤ by GitHub

I thought I would be able to iterate over each enclosure tag like this:

	$(xml).find("enclosure").each(function(i) {
	console.log( i.attr('url') ); // -> TypeError: i.attr is not a function
	});

view raw find_url_from_enclosures_1.js hosted with ❤ by GitHub

What it took me an embarrassingly long time to figure out (and we're talking about an hour here) is that the variable being passed into the anonymous function inside the #each() is actually the index of the element in the selection, and not the element itself.  Hence, printing i for this search would give an output of:

0
1

I was completely unprepared for that!  I assumed that the i variable was more than just an integer, and the index was just being returned by #toString() method when logging to console. It turns out that what I really wanted was:

	$(xml).find("enclosure").each(function(i) {
	console.log( $(this).attr('url') ); // note that I'm using $(this) and not i
	});

view raw find_url_from_enclosures_2.js hosted with ❤ by GitHub

which gives an output of:

a
b

the "urls" I set in my xml.

Another interesting thing I found today:

	var $enclosure_search = $(xml).find("enclosure")
	// different values for similar calls
	$enclosure_search // -> Object { 0: <enclosure>, 1: <enclosure>, length: 2, prevObject: Object, context: undefined, selector: "enclosure" }
	$enclosure_search[0] // -> <enclosure url="a">
	$($enclosure_search[0]) // -> Object { 0: <enclosure>, context: <enclosure>, length: 1 }
	// Get the first enclosure tag explicitly - #attr() can no longer be called
	$enclosure_search[0].attr('url') // -> TypeError: $enclosure_search[0].attr is not a function
	// jQueryify the first_enclosure variable so that #attr() can be called on it
	$($enclosure_search[0]).attr('url') // -> "a"

view raw jquery_selector_objects.js hosted with ❤ by GitHub

Directly getting an element by index from a jQuery selection returns the element object directly, which doesn't include methods like #attr(). Instead, you have to pass this object back into the $() function to convert it back to a selection so that you can get access to all those methods.

I guess you can never have too much jQuery!

	// TODO: needs more jQuery
	$( $(1)[0] + $(1 + 1)[0] + $(100).length ).first()[0] // -> 4

view raw needs_more_jquery.js hosted with ❤ by GitHub