Prettying up

The changes that users will notice the most have to do with visible behaviors.

Smaller footprint

The player is now minimized when first loaded rather than half-open. This prevents it from taking up space in the page when it is not needed.

Our goal is to empower the page, not overpower it. A smaller footprint helps the media and text mesh seamlessly.

Steady scrolling

The player doesn’t flicker while you’re scrolling anymore. Previously, if you were using any browser besides IE7, scrolling the page would cause the player to fade out and fade back in when you stopped scrolling. Now the player hovers in place while you scroll without fading in and out.

Search doesn’t interrupt

The player contains a link to search on text related to the current track. This link used to open in the current window, which would interrupt playback. Interrupting playback was a bad surprise for many people. This link now opens in a new window.

New home

There is a brand spanking new home page.

This page isn’t intended to have any dynamic features. It’s purpose is to draw new people into understanding the important points and to give them a smooth experience when trying out the player for the first time.

Play this page

You can now use almost any document on the web as a playlist by
linking to that document and adding class="playthispage" to the link. We scrape the document to find media links and pull those links back into the current page. There will be a play button next to the class=”playthispage” link, and the remote media links will be added to the current playlist.
“Play this page” can handle many different document types. It can find enclosures in an RSS or Atom feed. It can read all common internet playlist formats, including XSPF, ASX, M3U, and PLS. It can read HTML, so you can use one web page as the playlist for another.

Example link:
<a href="http://www.example.com/" class="playthispage">
play example.com
</a>.

Things you can do with this feature:

• A podcaster can use their feed as a playlist for their web page without needing to create an additional playlist.
• A musician’s web site can have a single master page for all of their music and use it as the playlist for any other page in the site.
• A developer could mash up audio sites with other sites. For example, you could put a Wikipedia entry about a composer together with Archive.org recordings related to that composer.
• An XSPF playlist with artist, album, title and other metadata could be imported into HTML, which lacks music metadata fields.
• A playlist creator could make their playlist accessible in third party web pages which ordinarily would be hampered by cross-site scripting restrictions.

We implemented this feature using a web service that we host. That’s interesting in that it shows the benefit of our unusual architecture. Browser-based media players have traditionally been pure Flash. Our player will use anything it can get its hands on at run-time, including JavaScript, CSS, semantic HTML, web services, and, yes, Flash, and having access to our own web services made it possible to do this feature.

Cross-domain XSPF

We now have the ability to load XSPF playlists from any public source on the web. Previously we were bound by the Javascript same-origin security policy, which is even more restrictive than the Flash crossdomain.xml approach. Now we aren’t bound by either.

Bug fixes

The green disc in the minimized mode of the player was pulsing even when no audio is playing. The pulsing green disc is meant to let you know when the minimized player is playing audio. It now does that.

Safari was posting some JavaScript errors on page load. These errors shouldn’t show up anymore.

We fixed some display issues with error icons in Firefox when the player encountered a bad mp3 link. (But error messages are still in a messy state overall).

Fixed a bug where the play button was not playing the right song. You could reproduce this bug by clicking a play button on the page, then clicking pause, then clicking a play button for a different song on the page. Rather than playing that different song, the player would restart the song that was paused.

Browser cache time for the player JavaScript files is now one day.

Who

The core team for this rev: Amit, Clint, Dave W, Douglas, Lino, Mike D, Suman, and William Khoe. Thanks to Mike D and Dave W for much of the text of this post, and kudos to wwhite for the scraper web service.

When Lucas Gonze first started at Yahoo! more than two years ago, the first thing he told me was that we needed a microformat for playlisting. Since we’d just finished creating and implementing XSPF I was allergic to the idea of another format, this one in HTML instead of XML. But Lucas was right and (thankfully) persistent. He finally convinced me by pointing out the fact I was in denial of: “No 14 year-old MySpace kid is going to create an XML file, upload it to a 3rd party host, make sure the mime type is set correctly, etc. It has to be as easy as writing HTML to add media to Web pages, and shouldn’t involve proprietary technologies like Flash.”

We started playing with the idea and prototyping how this might work. Lucas created hTrack, the microformat. We learned a lot and decided what we wanted to build and how we wanted to roll it out.

A few weeks back we released step zero, our first road-tested version of our Web-based Media Player. The idea is insanely simple:

1) Add this single line of javascript to your page:
<script src=”http://mediaplayer.yahoo.com/js”></script>
2) Add a link to any MP3 to your page, like so:
<a href=”http://209.133.33.135/~icr/BeastieBoys/Denver_Intro_TimeForLiving.mp3″>Mix Master Mike’s Tom Sawyer show opener and Time For Livin, from Denver</a>

and BOOM, you have a media player. Of course there’s a lot more you can do with it if you’d like. For more advanced uses see the public wiki or join the mailing list and converse with some of the creative and talented hackers there (we also hang out in #heavy on irc.landoleet.org if you want to drop by).

Again, playing MP3s is just the beginning. Note that the version on Music.Yahoo.com supports our subscription service. The next version will support Ogg, WMA, and any codec you have installed. Of course we’ve got a plan for video (it’s not called the Yahoo! Audio Player).

The idea is to make media a first-class object on Web pages and and abstracted away from proprietary technologies. The video tag in HTML 5 is headed the right direction, but the hAudio microformat (which we tentatively plan to support) will get us there even faster.

We’ve been very happy with the response. c|net and others included the player in their blog posts about the player, but more importantly MP3 bloggers are adopting it and smart folks are finding other clever uses for it.

Hope you dig it. If not, let us know why so we can improve it. If you do use it, be sure to add a link to your site on the Wiki so we can check it out.

To see it in action, here are a few Beastie Boys songs I recorded from the sound board back in 1998:

Mix Master Mike’s Tom Sawyer show opener and Time For Livin, from Denver. Check the crowd noise when The Biz starts singing. Crazy.
Slow and Low, live in Kansas City
Ricky’s Theme, also from Denver
Flute Loop, recorded live in Chicago

Enjoy,
ian c rogers
Yahoo! Music

Until a few weeks ago, when you opened a playlist created in Yahoo! Music Jukebox in the browser you were likely to get a nearly-blank white page that looked like an error message. No more. You will now see a full-featured module which includes the ability to play tracks and to comment on playlists. You can browse playlists by creator and you can browse playlists which a person has commented on, so there is a content-focused social network.

Play buttons will give you full songs if you are a Yahoo! Music Unlimited subscriber, and 30-second samples otherwise. The player is now rendered in the page rather than in a pop-up window.

Here are some playlists to help you get started:

• The Big Takeover by Ian Rogers is, I think, about exploring fresh releases, and has tunes from Dizzee Rascal, Pharoahe Monch, Bad Brains, and Betty Davis.
• My Acid Soul playlist is instrumental soul jams.
• Ilianna Car Songs by Adam Brett is music for his baby daughter. This is a fun theme, and if you have another playlist like it you might want to leave a note on Adam’s playlist.
• International Lounge Music by Steve Raymond is a playable version of a text-only playlist published in Food and Wine magazine.
• Ode to Rubber playlist by the great Robert of the Radish. See also his personal blog entry about this playlist.
• Over In About An Hour: Volume 8 (dishwashing music) by Johnny O’Brien.  See also his personal blog entry about this playlist.
  

We hope you’ll dig it.

Release notes

• There isn’t yet a convenient way to look up a playlist URL or to your find your own playlists in the browser. If you have Yahoo! Music Jukebox you can open it up, navigating to a playlist, copy the link to the clipboard, then go to a browser and open that link. In the browser you can submit a comment on a playlist, then click on the link to your playlists in the posted comment.
• Yahoo! Music Unlimited playback only works in Internet Explorer on Windows. In Firefox you can either use the IETab plugin or wait for our own plugin to be ready.
• Many alpha users had to upgrade or rebuild their Windows DRM setup.
• Sample playback works on the Mac if you have Flip4Mac installed. We could only deliver subscription tracks if Windows DRM was supported, which it isn’t, so this is blocked on the same old same old. About Linux support, we’ll do samples if we can find a reliable way to do WMA in the browser.
• The new player is only used in the playlist pages for now. We will hook it up to the rest of the new pages soon.