1. Create hyper-links for few MP3 files
2. Insert following script code to your page
   <script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
3. You are done! Yahoo! Media Player will be loaded and it will make all media links clickable

Here are few of my favorite tracks. Use the play button to listen. Thanks to RadioReloaded.com.

Tere Naina, Chandi Chowk To China (2009)
Jaane Kyun Log Pyar Karte Hein, Dil Chahta Hai (2001)
Akela hoon Mein, Raeth
Gum Sum Ho Kyun, Aksar
Ye Jo Mohabbat Hai, Dil Vil Pyar Vyar (2002)
Mumma, Dasvidaniya (2008)
Tujh Mein Rab Dikhta Hai, Rab Ne Bana Di Jodi (2008)

How does it work?

1. Inserting the script loads swfProxy, a flash player, from Yahoo’s server (http://l.yimg.com/us.yimg.com/i/us/mus/swf/ymwp/swfproxy-2.0.31.swf).
2. The javascript detects all hyperlinks with mp3/wav as file extension. For more details about supported types refer wiki page.
3. Then a play icon/button is inserted before each supported link. This is done using em.ymp-skin CSS class.
4. The Javascript then builds user interface as interactive sidebar. All images in the player are loaded by extracting small parts (using CSS) from single image.
5. When you click play button, the media file URL is passed to swfProxy object that actually plays the file. One thing is still wondering to me is how do they track mouse click event on these hyperlinks?

Certainly, a great idea and smart implementation!

- ankit

[Edited: 15 Feb, 09: Clarification for the fifth point under 'How it works'

JavaScript best practices suggest not to use any inline event (onClick, etc) with HTML tags. For example, following is a bad practice:

<a onclick="doSomething()" href="#">Click!</a>

Instead, you should separate out JavaScript from HTML.

<a href="backuplink.html" class="doSomething">Click!</a>

In a script block associate onClick event as following:


$('a.doSomething').click( function() {
// Do something here!
alert('You did something, woo hoo!');
} );
...

]

Tiles: The very first observation is – not whole map is fetched at once. Instead the entire map is divided into tiles and a series of Ajax requests are fired to retrieve some part of the actually map. As soon as a tile is fetched it is displayed at its position. Their position is well calculated no matter user drags the maps while requests are on the way. The benefit here is, the user interface remains responsive and it makes user eager to analyze an area of map as soon as it’s available.

Overlaying: The tiles can be considered basic unit of mapping applications. They are atomic and have minimal required information. The DHTML allows overlapping one tile (image) over another and makes development easier. Here is how.

For each type of data there exists an independent tile. The Ajax application retrieves these tiles and overlaps one above another. For example – the user requests to see map and satellite image together, and here is how the rendered image is showed.

	+
||

Tiles are Independent: Each tile is an independent unit and its request can be customized from client browser itself. For example making a request of http://kh2.google.com/kh?n=415&v=22&hl=en&t=trtssqrtqsqqtqq returns -

This is a newer image. While the request for http://kh2.google.com/kh?n=415&v=21&hl=en&t=trtssqrtqsqqtqq yields and older image for the same area.

Here the difference in the requests is of a single parameter ‘v’ and as per my guess its ‘version’. The next parameter ‘t’ seems a combination of zoom index, and the corner coordinates. For tiles of type map having some text, their language can be controlled using ‘hl=en’. Try using ‘hl=ru’ and you can see difference. So, the JavaScript executing in the client’s browser has complete control over what to display.

Ajax: Probably this needs to be the first point I should discuss. Google Maps does not use XMLHttpRequest for making Ajax calls. Instead, they have used I-FRAME (iFrame) for preloading images. When you use Firebug you won’t be also to trace any XMLHttpRequest calls. I think the reason for this would be the difficulty in using and image/jpeg response from XMLHttpRequest as an image object and display it in browser.

- ankit