The user interface of the new Lala music player on Fred Wilson’s A VC blog is a close copy of the UI from Yahoo Media Player. Some of the goslings:
Lala:
Streampad:
The Sixty One:
(That player at TheSixtyOne used to be an exact copy of the UI, but they’ve tweaked it since then. See comments below).
The original YMP/Goose player:
Some innovations that these developers have brought to the genre —
TheSixtyOne moved the player from the bottom of the viewport to the top, and merged it with global site navigation. The move to the top left gives it the single most important real estate on their site, which in fact makes good sense for a site that is about music. Merging with global nav is a more efficient use of limited screen real estate.
TheSixtyOne also made it so that no clicks within their site ever interrupt playback, which they do by having the entire site be one giant AJAX page. I remember having a conversation with Ian Rogers about exactly that method a few years ago, early in the development process. It’s fantastic to see it happen in the real world.
Streampad opens out to a much bigger size when you open the playlist tray, and that allows them to do a lot more functionality. Given how little space there is to work with in the actual player bar, creating real estate to fit new features in is important.
Lala added viral spread tools:
They also added the ability to add a song to a playlist right from the player. Both of their features are long overdue for this family of music player, and I doubt it will be long before they get copied into the other branches of the family.
The wide adoption of the style innovated in Yahoo Media Player means a generational change in browser music playback. This style incorporates the two players that put play buttons into the document flow — Delicious PlayTagger (by Dan Kantor, author of the Streampad player), and 1pixelout — and extends them with a master playlist and many other features. This style supercedes the first generation — XSPF Musicplayer and JW player. (Given that both of the leading 1st generation players used XSPF, I also claim credit for leading roles in both the first and third generations).
PlayTagger:
1pixelout:
XSPF Musicplayer:
JW player:
I’m working on a redesign of Brad Sucks right now and I’m interested in the Yahoo-style player. But I can’t seem to find any info on whether it’s possible to remove the “learn more about this player” text and Yahoo logo.
The main reason I’m with JW Player is because I could license it and customize it all I wanted.
Kill the logo with this:
#ymp-yahoo-logo { display: none !important }
Not sure about the code to kill the “learn more” section, though I know you can kill the text but leave the panel with:
#ymp-relevance { display: none !important; }
But try the mailing list for hacking info:
http://groups.yahoo.com/group/yhoomediaplayer
Awesome, thanks Lucas.
I’m really liking the Yahoo Media Player so far.
One more question: is there a way to suppress it on certain mp3 links? (I’m trying to control the location of the play button.)
Actually while I’m bugging you if you have any links for javascript interaction with the player I’d love some of that too. The stuff I’ve found is really light on examples.
If you put class=”htrack” on some of the mp3 links, only mp3 links with class=”htrack” will be in the playlist.
A bit more info on that is here: http://yahoomediaplayer.wikia.com/index.php?title=How_to_link&oldid=3750
About JS interactions, see Paul Irish’s hacks in his blog at aurgasm.us. Otherwise I’d ask the mailing list about that…
Hi Lucas, I found your blog while doing some research on the Yahoo Media Player. I’m hearing how great the player is and I would like to try it for my site but I just can’t find the basic code for the player anywhere.
Would you mind pointing me in the right direction?
Thanks
http://mediaplayer.yahoo.com . Good luck.
I love your easylistener media player and had several playlists going using that player. It was nice because all I had to do was point it to the webpage and it played all of the mp3’s. As of the 23rd, all that’s left where the players are, and that’s everywhere on my site, is a white box. It will not play anymore or load music.
Is there an updated code I can use that will restore my players? I’m hoping there is. Also I need the auto-play capability.
Thank you Lucas.
Edie
Edie, even though that great little Flash player is gone, you can still use the trick of pointing to a web page if you use the Javascript player at mediaplayer.yahoo.com instead. Just link to the page you want to play with class=”playthispage” in the link, like this:
hit this link to play the mp3s in the page at mediaplayer.yahoo.com
*clapping* Iam sooo excited, although it’s going to be alot of work to convert all those codes–but that’s okay. You are a genius and very gracious to answer my question so fast. Thank you. I’ll let you know how it works out.
You are the best! Why did they kill that webjay player? It was a wonder! Iloved it.
Take Care and Thanks Again!
~edie
It works great. Is there a way to put it on auto-play Lucas? Thank you.
Hi Edie,
http://mediaplayer.yahoo.com/api/
<script type="text/javascript"> var YMPParams = { autoplay:true, } </script>Lucas,
I so appreciate you. Thank you for everything.
Edie
Lucas, I tried to embed this code that you supplied:
var YMPParams =
{
autoplay:true,
}
..but it would not work. In fact it keeps disappearing. The old code was:
It would play either a page or a single mp3 (as you know)…so I am assuming that the browser won’t read the css looking code. I don’t know.
I tried to modify it a little by saying ‘playthissong’..but it computer snickered. LOL
Is there an equivalent embed code to the one you gave me? I hope I am not getting on your nerves with all these questions.
Thank You,
Edie
embed wmode=”opaque” src=”http://webjay.org/flash/dark_player” width=”82″ height=”38″ wmode=”transparent” flashvars=”playlist_url=http://api.ning.com/files/EIwvmMeQ3I2ov751Wz8hejyD8WfEkPykDC457gpOH6i-2eCRrRkw4pcFlaTs6Kd9yAcNdu6a9Cp-UtiN2ujFXKLNHB9OVl3D/Soulrific_Episode_482.mp3&rounded_corner=1&autoplay=1&skin_color_1=0,0,0,0&skin_color_2=0,0,0,0″ type=”application/x-shockwave-flash” pluginspage=”http://www.adobe.com/go/getflashplayer” allowscriptaccess=”never” >
Edie, that code I supplied was to autostart the player. It is in addition to the original code, not instead of it. It should go before the <script … line.
Thank You…From The Heart.
Hi Lucas,
I’ve just installed YMP and it’s great but I have a few problems:
1. The playlist does not show all the tracks that I have installed and it also shows the name of the mp3 file instead of the entry that should be there. Can I somehow edit the playlist?
2. The play button does not show up next to one track listing on the webpage using Firefox. It’s ok for the others. If I recycycle the page it shows up but as soon as I move the cursor it disappears again. If I click where the button should be it works ok. Only a problem on Firefox.
3. In general the page shows up ok in Firefox, Chrome, & Safari but I get a whole heap of html coding show up on IE, mixed in with the track names and play buttons. Is there some way I can get rid of this in IE without affecting the other browsers or am I stuck with this?
I have gone to my page editor several times and tried to fix things without success. Any help much appreciated.
Hey style905,
http://tech.groups.yahoo.com/group/yhoomediaplayer/ is the best place for this kind of help. Your questions here cover a lot of ground, definitely out of scope for the kind of tech support I do. When you post, it’s important to give the URL of your page, so that we can take a look at it.
Off the cuff answers:
#1: not showing tracks could mean something related to markup or something related to display. but you have much control over the playlist, yes… See http://yahoomediaplayer.wikia.com/wiki/How_to_link
#2: play button not showing is some conflict between your local CSS and the player’s. Definitely going to need to take out a debugger to solve it.
#3: HTML coding showing up in IE is completely no ok. that’s a live and high priority bug of some kind. but I’m sure there’s more to it than meets the eye.
you’re seeing a lot more problems than you should be. Not sure if it means that Y is completely abandoning the project or that your pages have a more complexity than ordinary, e.g. conflicting versions of YUI. Friends still at Yahoo tell me that it’s really not abandoned, fwiw.
Folks, see
http://mediaplayer.yahoo.com/api for formal documentation on the Javascript API.
Hi Lucas,
Many thanks for your reply.
I have persevered by deleting parts of the webpage in my editor and re-doing them. As far as I can see the links were fine but I re-did them several times just to be sure. I had typed the track names into the page by cutting and pasting from a Word document but I deleted that and typed straight into the editor. That seems to have solved the IE problem.
Actually most of the problems are fixed, except the occasional time when the button does not show up against one particular track in Firefox. It’s ok for other browsers. It’s an intermittent problem but I can live with it. If the button does not show, then users can click on the hypertext link ok.
Thanks again.