Load Tumblr audio posts using a HTML5 audio element and display using kolber's audio.js

TumblrHTML5Audio.js

// Load Tumblr audio posts using a HTML5 audio element and display using kolber's audio.js
//
// Requirements:
// audio.js (http://kolber.github.com/audiojs/)
//
// Usage:
// I'm assuming that you've got audio.min.js loaded in the page already
// I just have it prepended in the same file before this code
// Comments should help you through it, ask me questions at @interstateone

$(document).ready( function() {

	// Only on pages that have an element to contain it
	if ($("#weblog").length) {

		// Get latest weblog posts with Tumblr API
		// num variable sets number of posts to retrieve
		$.getJSON("http://blog.brandonevans.ca/api/read/json?num=1&callback=?",
			function(data) {
				$.each(data.posts, function(i,posts){
					var type = this.type, post;

				// Examples of how to handle other post types...
				if (type === "regular") {
					post = "<h3>" + this["regular-title"] + "</h3><p>" + this["regular-body"] + "</p>";
				} else if (type === "link") {
					post = "<h3><a href='" + this["link-url"] + "'>" + this["link-text"] + "</a></h3>";
				} else if (type === "quote") {
					post = this["quote-text"];
				} else if (type === "photo") {
					post = "<a href='" + this['url-with-slug'] + "'><img src='" + this["photo-url-1280"] + "'></a>";
					if (this["photo-caption"]) {
						post += "<p>" + this["photo-caption"] + "</p>";
					}
				} else if (type === "conversation") {
				} else if (type === "video") {
					post = this["video-player"] + "<p>" + this["video-caption"] + "</p>";

				// The good stuff
				} else if (type === "audio") {

					// This part borrowed and modified from Shaun Inman's HTML5 Audio .safariextension
					// http://shauninman.com/archive/2010/11/05/html5audio_safari_extension
					// Grabs the audio file URL for Tumblr-hosted audio

					var script = this['audio-player'].replace(/(\r|\n)/g, '');
					var audioFile = script.replace(/.+audio_file=/,'').replace(/&.+/, '');

					// ?plead tip from @evanwalsh: http://twitter.com/#!/evanwalsh/status/612667370774530
					audioFile += '?plead=please-dont-download-this-or-our-lawyers-wont-let-us-host-audio';
					post = '<audio src="'+audioFile+'" preload="none" id="tumblr-audio"></audio>';

					// </shauninman>

					// If artist and track name info are in the post, append them after the audio element
					if (this["id3-artist"] && this["id3-title"]) {
						post += "<p class='ap-info'><span class='artist'>" + this["id3-artist"] + "</span> – <span class='track'>" + this["id3-title"] + "</span></p>";
					} else if (this["id3-title"]) {
						post += "<p class='ap-info'><span class='track'>" + this["id3-title"] + "</span></p>";
					}

					// If there's a body in the audio post, append that as well
					if (this["audio-caption"]) {
						post += this["audio-caption"];
					}
				} else if (type === "answer") {
				}

				// Append the entire post string that we've created to the containing element
				$('#weblog').append(post);

				// Start up the audio.js instances for the post only (don't interfere with other <audio> tags in the page) with paths to the assets
				var postElement = getElementById('tumblr-audio');
				audiojs.create(postElement, {
					imageLocation: 'public/images/player-graphics.gif',
					swfLocation: 'public/swf/audiojs.swf'
				});
			});
		});
	}
});