« YUI pie chart example
Zlatina = 4 »

MP3 player from Yahoo! - bookmarklet

Update Jan 30, 2008: updated code based on comments and code from Carl

Here's the scenario: you have a page that links to some .mp3 files. You add a line of code in your page and lo and behold, there's a nice media player embedded into the page. Your visitors no longer have to download the MP3s, they can just stream it right there. All the mp3s on the page become part of a playlist.

The line in question you need to add to your page is:

<script src = "http://mediaplayer.yahoo.com/js"></script>

More about the player here - yahoomediaplayer.wikia.com

For examples of sites using this player in the wild, try aurgasm.us

A bookmarklet

Now, here's what you can do if you want to use the player, but the web site owner haven't incorporated it yet. Take the player with you. Run my bookmarklet that will simply insert the required javascript into the page.

So here goes in two easy steps:

  1. Grab the bookmarklet:

    Right-click, add to favorites

  2. Go to any page that links to MP3s and click your new shiny bookmarklet

    Enjoy!

Source

The readable source code of the bookmarklet:

javascript:(function(){

  var start = function(){YAHOO.music.WebPlayer.asyncLoadPlayer()};

  var script = document.createElement('script');
  script.src = 'http://mediaplayer.yahoo.com/js';

  if(script.addEventListener){
    script.addEventListener("load", start, false);
  } else{
    script.onreadystatechange = function(){
      if(this.readyState=="complete"){
        start();
        script = null;
      }
    }
  }
  script.type="text/javascript";
  document.getElementsByTagName('head')[0].appendChild(script);

})();

Post this entry to: » del.icio.us  » Digg  » Furl  » Newsvine  » reddit  » Y!

This entry was posted on Wednesday, January 23rd, 2008 and is filed under JavaScript, Music, bookmarklets, yahoo. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Somewhat related posts

13 Responses to “MP3 player from Yahoo! - bookmarklet”

  1. Media Districts Entertainment Blog » MP3 player from Yahoo! - bookmarklet Says:
    January 23rd, 2008 at 5:13 am

    […] phpied.com created an interesting post today on MP3 player from Yahoo! - bookmarkletHere’s a short outline […]

  2. MP3 player from Yahoo! - bookmarklet Says:
    January 23rd, 2008 at 5:21 am

    […] Original post by Stoyan and software by Elliott Back […]

  3. foo Says:
    January 23rd, 2008 at 5:38 am

    bookmarklet not working for me in Firefox 2, Firebug throws out: "YAHOO.music.WebPlayer.asyncLoadPlayer is not a function"

  4. Stoyan Says:
    January 23rd, 2008 at 5:58 am

    foo, this is probably because the script is not yet loaded (note to self: should've done a better job testing if the script is loaded).

    You can just run it again after you give it a second or so to load.

  5. foo Says:
    January 23rd, 2008 at 7:32 am

    this runs without an error, but it does nothing:

    javascript:(function(){var script = document.createElement('script');script.src = 'http://mediaplayer.yahoo.com/now';document.getElementsByTagName('head')[0].appendChild(script);setTimeout('function(){YAHOO.music.WebPlayer.asyncLoadPlayer();}', 1000);})()

    btw. better use "http://mediaplayer.yahoo.com/now" as script source ;)

  6. Carl Says:
    January 25th, 2008 at 3:10 pm

    As noted, you could improve the code by actually waiting for the script to load instead of guessing that it will be there in 100ms.

    javascript:(function(){
    function c(){
    YAHOO.music.WebPlayer.asyncLoadPlayer();
    }
    var e=document.createElement("script");
    if(e.addEventListener){
    e.addEventListener("load",c,false);
    }
    else{
    e.onreadystatechange=function(){if(this.readyState=="complete"){c();}}
    }
    e.type="text/javascript";
    e.src="http://mediaplayer.yahoo.com/js";
    document.getElementsByTagName("head")[0].appendChild(e);
    })();

  7. Stoyan Says:
    January 26th, 2008 at 6:20 am

    Thanks Carl, this is much better, definitely! 100ms delay was one of those works-for-me quickies which no self-respecting developer should post publicly ;)
    I'll update my post with your permission to use your code.

  8. Carl Says:
    January 28th, 2008 at 8:29 pm

    Sure. Feel free to incorporate my code. No charge ;-) Thanks for posting the bookmarklet!

  9. Carl Says:
    January 29th, 2008 at 11:49 am

    By the way…

    Change line:
    e.onreadystatechange=function(){if(this.readyState=="complete"){c();}}

    to:
    e.onreadystatechange=function(){if(this.readyState=="complete"){c();e=null;}}

    This will prevent a memory leak in IE6 due to a bug in IE memory management (which is fixed in IE7).

  10. phpied.com » Blog Archive » Audacity + Starcaster Says:
    January 31st, 2008 at 6:30 pm

    […] Ah, yeah and the nice player you use to hear these MP3s is the Yahoo! Media Player, which you can integrate on every page. Post this entry to: » del.icio.us  » Digg  » Furl  » Newsvine  » reddit  » Y! […]

  11. Paul Irish Says:
    February 23rd, 2008 at 8:20 pm

    Stoyan, thanks for throwing together that bookmarklet. It's very useful. :)

  12. Stoyan Says:
    February 25th, 2008 at 8:51 pm

    np, Paul, thank you for keeping aurgasm.us up

  13. Когато оловният дирижабъл е тъжен | Блогът на Гонзо Says:
    March 20th, 2008 at 3:08 pm

    […] Благодаря на Стоян, че ме открехна за  Yahoo! Media Player, благодарение на който можете да слушате парчетата без изрично да ги теглите. […]

Leave a Reply