Fun with Yahoo Media Player!

A quick way to insert music in your site:

  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!');
} );
...

]

6 thoughts on “Fun with Yahoo Media Player!

  1. daphna

    hey there.
    ! your yahoo player has exactly the same problem i have on my site:

    on Firefox works great.

    on chrome touching the volume button mutes it and locks.

    on IE7 isn’t able to play any audio (tho the player shows)

    I’m on word press(private domain) and desperately seeking a solution for this.
    any ideas?

  2. Stephen Garcia

    Ankit,

    Nice little tutorial. Keep having fun with the player, and let us know of any bugs/enhancements.

    ciao,
    Stephen Garcia
    Y! Music

  3. Plop!music

    Thx for the tut. I’ve seen a lot of people reporting bugs like daphna. What is the best approach to this, to disable the script for browsers thats unsupported/where the script bugs or just allow the script for browsers thats 100% supported with no reported bugs? Anyone have a “whitelist”?

    For example, i’ve seen many people reporting the volume button -> mute problem.

    Best regards, Pontus

  4. Philip Patel

    Pontus,

    Thats what Im trying to do for the iPhone. Disable the YMP script if the browser is on a mobile device.