MP3 player from Yahoo! – bookmarklet

Update Jan 30, 2008: updated code based on comments and code from Carl
Update Dec 11, 2008: updated the code thanks to the comment from Nolan

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.mediaplayer.loadPlayerScript()};

  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);

})();

This entry was posted on Wednesday, January 23rd, 2008 and is filed under bookmarklets, JavaScript, Music, 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.


Get notification for future posts: follow me on Twitter or subscribe to my RSS feed

50 Responses to “MP3 player from Yahoo! – bookmarklet”

  1. Media Districts Entertainment Blog » MP3 player from Yahoo! - bookmarklet Says:

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

  2. MP3 player from Yahoo! - bookmarklet Says:

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

  3. foo Says:

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

  4. Stoyan Says:

    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:

    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:

    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:

    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:

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

  9. Carl Says:

    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:

    [...] 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:

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

  12. Stoyan Says:

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

  13. Когато оловният дирижабъл е тъжен | Блогът на Гонзо Says:

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

  14. Genstart og Rock » Blog Archive » Read MP3 blogs with ears, not fingers Says:

    [...] Your iTunes library sucks and you head off to the mp3 blogs for inspiration. But they only play one track at a time. Enter the Y! Player as a bookmarklet: [...]

  15. Grunge Hippie » Blog Archive » thesixtyone.com Says:

    [...] The in-age player is also coo, albeit starngely resambling the Yahoo! media player [...]

  16. foo Says:

    this is not working anymore. Firebug says “YAHOO.music” is not defined

  17. Nolan Says:

    Yahoo must have recently updated their javascript, as the above bookmarklet no longer works. Luckily, though, the fix is easy.

    In the above piece of Javascript, all you need to do is change “YAHOO.music.WebPlayer.asyncLoadPlayer()” to “YAHOO.mediaplayer.loadPlayerScript()”

    This fixed everything up for me. Thanks for the useful bookmarklet!

  18. Lucas Gonze Says:

    Nolan, thanks for the fix. I needed that.

  19. Stoyan Says:

    Thanks very much, Nolan! Code/post updated.

    S

  20. Letamank Says:

    Was able to run without an error dont know if it’s ok

    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);})()

  21. rickdog Says:

    This works for me:

    javascript:(function(){var s=document.createElement(‘script’);s.src=’http://mediaplayer.yahoo.com/js’;s.type=’text/javascript’;document.getElementsByTagName(‘head’)[0].appendChild(s);setTimeout(‘YAHOO.mediaplayer.loadPlayerScript()’,400);})()

  22. Jamin Says:

    Love it!

    A few mp3 blogs rss feeds + this bookmarklet = a brand new playlist every day

    Thank you

  23. Lida Says:

    thanks for great article. very usefull codes…

  24. Christopher James Francis Rodgers Says:

    Subject: Yahoo Media Player Install Help Tips.

    Re: I hope to save someone the
    struggle I just went through.

    ===
    How are you all?

    I was so excited to learn yesterday
    that Yahoo had provided us with ability
    to embed *.mp3′s so easily for me and
    my guests.. with a ‘play-list’…
    and YMP is modifiable to our
    hearts content.

    Happiness.

    I have been longing
    to learn to embed *.mp3′s
    for many years
    ever since the days of old when
    I needed MIDI files and
    a tag.

    And YMP appears to have
    a solid development of
    a bookmarklet as well.

    The bookmarklets developers site
    I understand to be this..

    Heaven.

    However, while I thought
    I knew xHTML well enough,
    I spent the last 8 hours diligently
    trying to get Yahoo Media Player to play
    from an html file on my system.

    (I still have 17 FireFox tabs left open
    from my research efforts;
    and I am a minimalist, typically.)

    The casual atmosphere
    I discovered when I joined
    the YahooGroup yhoomediaplayer

    led me to believe that I would finally
    find a solution.

    ***************************************
    The Solution I found was to put
    not only the *.mp3 file on my BlueHost
    webserver; but I also had to put my
    html file with the javascript
    and the link
    on my server as well before
    YMP would work.
    ***************************************

    <<Is That Normal?

    On another forum,
    someone said that she/he
    had some luck with *.wav files
    but not *.mp3′s;
    but it was not clear to me whether
    those files were on that person’s
    local computer system or not.

    But once I caught the understanding
    that the sound files could not be
    accessed while they resided
    on my local computer system,
    I never-the-less assumed
    I would be able to call
    the files from the internet
    using a local-system html file.

    But I could not.

    So again I wonder, and ask,
    “Is That Normal?”

    ===

    I have since tested
    and found out
    that it does not matter
    where the code ..

    .. is put into the html file.

    It can go on the first line
    of the html document;
    It can follow
    just befor ;
    It can go anywhere in the
    , or the ,
    including either before or after the
    x;
    Nor did it matter if is was
    either right before or
    right after the tag.

    Granted: I did not try putting it
    within any tag; I’m not crazy.
    You know? : o )

    ===

    ### Sample Page.

    http://great-grandma.com/ymp.html

    ===

    ### Sample Code Follows.

    Great-Grandma.com – YMP Test. Welcome.


    hello-what-i_love_you-cool.mp3

    ### End Sample HTML Code.

    ===

    Note that the ‘javascript’ works
    even as it sits following the
    tag;
    at least with Mozilla FireFox
    [updated fully].

    I wish you all the very best.

    - Christopher James Francis Rodgers.

    ===

    PS: Bonus:
    Magical Word Keys
    To All Things Humanly
    Possible And Conceivable.
    http://aquakeys.com/toltec

    ###

  25. PA Amplifier Says:

    most mp3 players that we have these days are made in china but they are quite good anyway ‘.-

  26. Yemek Tarifleri Says:

    I needed that.
    thx

  27. Savas Oyunlari Says:

    Thank you so much for this topic.

  28. Korku Oyunlari Says:

    thank you so much to.. ( şı )

  29. Savaş Oyunları Says:

    Thank you so much for this topic.

  30. Korku Oyunları Says:

    thank you so much to..

  31. tatil Says:

    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.

  32. balayi Says:

    created an interesting post today on MP3 player from Yahoo! – bookmarkletHere’s a short outline

  33. kusadasi otelleri Says:

    thanks for great article. very usefull codes…

  34. erken rezervasyon otelleri Says:

    Love it!

    A few mp3 blogs rss feeds + this bookmarklet = a brand new playlist every day

    Thank you

  35. erken rezervasyon Says:

    Yahoo must have recently updated their javascript, as the above bookmarklet no longer works. Luckily, though, the fix is easy.

  36. sohbet Says:

    Yahoo must have recently updated their javascript, as the above bookmarklet no longer works. Luckily, though, the fix is easy.

  37. nashville seo Says:

    http://www.nashvilleseoservices.com Thanks for that awesome posting. It saved MUCH time :-)

  38. erken rezervasyon fiyatları Says:

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

  39. gold kurye Says:

    motorlu kurye ve toplu dağıtım hizmetleri

  40. anıl kurye Says:

    istanbul içi moto kurye acil kurye

  41. muhendislik Says:

    thx for this topic

  42. youtubex Says:

    Just in the comfort of your home you can splurge and enjoy yourselves with movies you have been dying to see. And it’s not going to cost you even a single cent. How cool is that?/16.01.2011 13:28:43

  43. güzellik Says:

    thank you site admin 13

  44. sohbet Says:

    Thanks a perfect place

  45. AstroPegaso Says:

    Ottimo script, grazie.
    Peccato che non funziona su windows xp con internet explorer 8.
    Funziona invece molto bene con IExplorer 9, Firefox 4, Safari 5, Opera 11.

    Per il browser Opera, “Yahoo media player” è disponibile come Plugin. https://addons.opera.com/en/addons/extensions/details/yahoo-media-player/1.1.1/?display=en

    Sarebbe molto bello se qualcuno farebbe il plugin anche per IExplorer.

    GRAZIE.

  46. moto kurye,istanbul kurye,acil kurye Says:

    moto kurye,istanbul kurye,acil kurye…

    [...]MP3 player from Yahoo! – bookmarklet / Stoyan’s phpied.com[...]…

  47. moto kurye,istanbul kurye,acil kurye Says:

    magnificent points altogether, you just won a new reader. What could you suggest in regards to your submit that you made some days ago? Any sure?

  48. oyun,oyna,flash, Says:

    oyun,oyna,flash,…

    [...]MP3 player from Yahoo! – bookmarklet / Stoyan’s phpied.com[...]…

  49. web hosting Says:

    web hosting…

    [...]MP3 player from Yahoo! – bookmarklet / Stoyan’s phpied.com[...]…

  50. mediafire mp3 songs Says:

    mediafire mp3 songs…

    [...]MP3 player from Yahoo! – bookmarklet / Stoyan’s phpied.com[...]…

Leave a Reply