Tuesday, January 26, 2010


Came across http://8tracks.com today. It is basically a site where you can create your "mp3 mix tapes". You can add songs to your mix by selecting from their existing collection of individual mp3's or by uploading your own individual mp3's. Note that you cannot do "advanced" mixing with this app - no knob-twisting for all you bedroom DJs :-)

To cover their arses, they have enforced a set of interesting rules which would apparently ensure that they don't get sued by record companies. These include:

- This mix has to "include at least 8 tracks, no more than 2 of which are from the same artist or album"

- 8tracks will randomize "playback the 2nd time a person listens to your mix"

- You can only listen to 30 seconds of each track when creating your mix

- When listening to of mixes created by others, you can only skip 3 tracks per hour.

Check out my mix (dub, dubstep, electronic)

Anti War Dub ( Feat. Spen G) Digital Mystikz

Aztec Warrior Mad Professor

Negions Fail Wisp

Drop The Other (Scuba's Vulpine Remix) Emika

Love Cry (Joy Orbison Remix) Four Tet

Chronograph Sketch Show

Exhibit A (Transformations) Jay Electronica

Eastern Jam Chase & Status

Yes I like the idea! No doubt I will be creating more mini-mixes soon...

Monday, January 11, 2010

jQuery autocomplete + JSONP + Wikipedia OpenSearch service

My second Desert Island-related post...

A bit of background...

When a user creates his / her list in the app, he / she has to somehow specific a list of albums.

There were a number of issues which I had to consider when designing this part of the app:

1) where do I get artist name /album names from?
2) do users browse and select or do they simply type into a freetext field with auto-completion / suggestion?
3) when users have to specify new artist names / album names unknown to my app, how do I ensure that they type in the "universally-accepted" names for the artists / albums?

It is not realistic for me to keep a database of all known artists and albums - it would be a maintenance nightmare. New albums come out everyday!

So I came up with the following idea: (why not add your list and see it work in practice!)

When adding an album to the list, the user would

1) specify the artist using a freetext field with auto-completion (using data provided by the Wikipedia OpenSearch service)
2) click on "list albums" to see a list of popular albums by this artist (using Last.fm's artist.gettopalbums service)
3) either select an album from the list or, if the album is not in the list, create a new album, again using another freetext field with auto-completion (again using the Wikipedia OpenSearch service)

This way, I don't really differentiate between new or old artists / albums (i.e. whether a certain entry has been chosen by somehow else before) when dealing with the list creation UI.

In this blog I would like to focus on the use of jQuery autocomplete plugin along with the (not very well-known but IMHO very useful) Wikipedia OpenSearch service.

jQuery autocomplete plugin with Wikipedia Opensearch

Links to jQuery autocomplete plugin and documentation

Unfortunately, the documentation above fails to mention how to use a third-party cross-domain JSONP service (the Wikipedia service in my case) to provide data for the autocomplete plugin. After a bit of googling, I came across this excellent article which shows the autocomplete plugin does really with JSONP! Do go ahead an read this article.

The following is my implementation using the Wikipedia Opensearch JSONP service, where expression is the CSS selector of the html textbox to which the autocomplete widget is to be attached:

function attachWikiAutoComplete(expression) {
$(expression).autocomplete("http://en.wikipedia.org/w/api.php", {
dataType: "jsonp",
parse: function(data) {
var rows = new Array();
var matches = data[1];
for( var i = 0; i < matches.length; i++){
rows[i] = { data:matches[i], value:matches[i], result:matches[i] };
return rows;
formatItem: function(row) { return row; },
extraParams: {
action: "opensearch",
format: "json",
search: function () { return $(expression).val() } },
max: 10

For those of you interested, an example HTTP request sent by the autocomplete plugin to Wikipedia could be (user's just typed in "metallic"):

As you can see, the autocomplete plugin automatically adds the parameters "q" and "limit" to the url, which Wikipedia simply ignores. If you are to create your own REST data service for the plugin, you may want to create your service to understand "q" as the query parameter and "limit" for result limit parameter. However, if you are using a third-party service, just add the required query pararmeter ("search" in the case of the Wikipedia Opensearch service) as part of the "extraParams" option, as I have done here.

To see this Wiki jQuery autocomplete in action, log into http://desert-island.appspot.com via Facebook Connect, click on "Create" in the welcome box and try adding albums to the empty list!