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:
- Grab the bookmarklet:
Right-click, add to favorites
- 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 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.
Get notification for future posts: follow me on Twitter or subscribe to my RSS feed
January 23rd, 2008 at 5:13 am
[...] phpied.com created an interesting post today on MP3 player from Yahoo! - bookmarkletHere’s a short outline [...]
January 23rd, 2008 at 5:21 am
[...] Original post by Stoyan and software by Elliott Back [...]
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”
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.
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
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);
})();
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.
January 28th, 2008 at 8:29 pm
Sure. Feel free to incorporate my code. No charge
Thanks for posting the bookmarklet!
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).
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! [...]
February 23rd, 2008 at 8:20 pm
Stoyan, thanks for throwing together that bookmarklet. It’s very useful.
February 25th, 2008 at 8:51 pm
np, Paul, thank you for keeping aurgasm.us up
March 20th, 2008 at 3:08 pm
[...] Благодаря на Стоян, че ме открехна за Yahoo! Media Player, благодарение на който можете да слушате парчетата без изрично да ги теглите. [...]
June 11th, 2008 at 6:53 am
[...] 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: [...]
July 15th, 2008 at 11:14 pm
[...] The in-age player is also coo, albeit starngely resambling the Yahoo! media player [...]
November 14th, 2008 at 10:00 am
this is not working anymore. Firebug says “YAHOO.music” is not defined
November 21st, 2008 at 6:59 pm
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!
November 29th, 2008 at 6:31 pm
Nolan, thanks for the fix. I needed that.
December 11th, 2008 at 3:49 pm
Thanks very much, Nolan! Code/post updated.
S
January 30th, 2009 at 1:23 pm
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);})()
April 17th, 2009 at 11:45 pm
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);})()
August 13th, 2009 at 11:21 am
Love it!
A few mp3 blogs rss feeds + this bookmarklet = a brand new playlist every day
Thank you
September 3rd, 2009 at 7:31 am
thanks for great article. very usefull codes…
February 2nd, 2010 at 7:00 pm
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
###