MP3 player from Yahoo! – bookmarklet

January 23rd, 2008. Tagged: bookmarklets, JavaScript, Music, yahoo

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

Tell your friends about this post: Facebook, Twitter, Google+

65 Responses

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

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

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

  4. 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. 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. 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. 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. Sure. Feel free to incorporate my code. No charge ;-) Thanks for posting the bookmarklet!

  9. 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. [...] 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. Stoyan, thanks for throwing together that bookmarklet. It’s very useful. :)

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

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

  14. [...] 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. [...] The in-age player is also coo, albeit starngely resambling the Yahoo! media player [...]

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

  17. 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. Nolan, thanks for the fix. I needed that.

  19. Thanks very much, Nolan! Code/post updated.

    S

  20. 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. 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. Love it!

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

    Thank you

  23. thanks for great article. very usefull codes…

  24. 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. most mp3 players that we have these days are made in china but they are quite good anyway ‘.-

  26. I needed that.
    thx

  27. Thank you so much for this topic.

  28. thank you so much to.. ( şı )

  29. Thank you so much for this topic.

  30. thank you so much to..

  31. 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. created an interesting post today on MP3 player from Yahoo! – bookmarkletHere’s a short outline

  33. thanks for great article. very usefull codes…

  34. Love it!

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

    Thank you

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

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

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

  38. motorlu kurye ve toplu dağıtım hizmetleri

  39. istanbul içi moto kurye acil kurye

  40. thx for this topic

  41. 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

  42. thank you site admin 13

  43. Thanks a perfect place

  44. 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.

  45. moto kurye,istanbul kurye,acil kurye…

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

  46. 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?

  47. oyun,oyna,flash,…

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

  48. web hosting…

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

  49. mediafire mp3 songs…

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

  50. Highly good many thanks, I do believe your trusty visitors would certainly want even more articles similar to this carry on the great hard work.

  51. Works great, thanks!

  52. Its like you read my mind! You seem to know a lot approximately this, such as you wrote the book in it or something. I think that you just can do with some % to power the message house a little bit, however instead of that, that is wonderful blog. An excellent read. I’ll definitely be back.

  53. Thank you for this source code.
    How should I modify the source code to automatically playback the playlist?
    The original code only allows one-time playback.

  54. Thanks a bunch for sharing this with all people you actually understand what you are talking approximately! Bookmarked. Kindly additionally talk over with my site =). We can have a hyperlink exchange agreement between us

  55. I do consider all the ideas you’ve offered in your post. They are very convincing and can certainly work. Still, the posts are too brief for starters. May just you please extend them a bit from next time? Thank you for the post.

  56. Thanks for any other magnificent article. The place else could anybody get that type of info in such an ideal manner of writing? I have a presentation next week, and I’m on the look for such information.

  57. I am really encouraged with your publishing capabilities along with while using shape to your weblog. Is a new settled matter and also have you change that yourself? At any rate keep on the excellent quality producing, it is actually unusual to check out a terrific blog site like this one nowadays.

  58. It’s actually a nice and helpful piece of info. I am glad that you simply shared this useful information with us. Please stay us informed like this. Thank you for sharing.

  59. Woah that web site is great i like studying your content regularly. Maintain the truly amazing paintings! You now know, many want round for this facts, you may help them drastically.

  60. This link is not working any more ..
    is there any alternative ?

  61. This link is not working any more .. Ureticy

  62. yup i would like a working solution too…
    multimedia on the fragmented web sucks…

  63. Woah that web site is great i like studying your content regularly. Maintain the truly amazing paintings!

  64. Thank you for the auspicious writeup. It actually was a
    amusement account it. Glance complex to more delivered agreeable from you!
    By the way, how could we keep in touch?

  65. This type of piano. So, please understand and master the basics of music such as staff notations, traditional
    tunes, and other jazz greats. The Smithsonian’s National Museum of American History launched last month
    an online edition of The William Steinway Diary website allows scholars and the public to meet piano
    nanny LEON FLEISHER at a Champagne Reception following his concert.

Leave a Reply