Yahoo Media Player

All Tweets pages contain Yahoo Media Player. It will be shown as soon as some links to audio file are found in text boxes.

You add audio to your web page by linking to it:

<a href="http://example.com/song.mp3">My Favorite Tune</a>

This page explains how you can have more fine-grained control over the player by using standard attributes of the <a> (anchor) element, like this:

<a href="http://example.com/mp3/song" class="htrack" tabindex="1" 
   title="Movin' Right Along" type="audio/mpeg">my favorite song</a>

Anchor Element Attributes

href:

A URL for an audio file. For example:
<a href="example.mp3">a song</a>

type:

The MIME type of the file. If this is an audio file type, Yahoo! Media Player will know that the link is playable. For example:
<a href="http://example.com/mysong" type="audio/mpeg">a song</a>

tabindex:

By default, tracks are loaded into the player in document order, meaning the order in which they appear to the HTML parser. To override this default order you can use the tabindex attribute. See the HTML specification for details. For example:
<a href="example1.mp3" tabindex="2">second song</a><a href="example2.mp3" tabindex="1">first song</a>

title:

The "title" attribute can be used to specify the audio file's name. For example:
<a href="example.mp3" title="Movin' Right Along">a song</a>

class="htrack":

Explicitly marks audio that should be added to the play queue. For example:
<a href="example" class="htrack">a song</a>

Playable Links

You tell the music player which links are playable using one of these methods:

  1. Use a file extension that suggests a playable file type:
    <a href="http://example.com/mysong.mp3">this is a song</a>
    
  2. Use the type attribute to hint that the file type is playable:
    <a href="http://example.com/mysong" type="audio/mpeg">this is a song</a>
    

    If the type attribute is set, the music player ignores the file extension. In this example, the link would be considered playable:
    <a href="http://example.com/mysong.php" type="audio/mpeg">this is a song</a>
    

    And in this example, the link would not be considered playable:
    <a href="http://example.com/mysong.mp3" type="image/png">this is a song</a>
    
  3. Give the link the class "htrack", like this:
    <a class="htrack" href="http://example.com/mysong">this is a song</a>
    
    If the htrack class is set, the music player includes the link, regardless of the file extension or the type attribute. In this example, the link would be considered playable:
    <a class="htrack" href="http://example.com/mysong.php" type="application/xhtml+xml">this is a song</a>
    
    If the htrack class is set on any link, then only links with the htrack class set will ever be used.

    NOTE: Even if the "htrack" class is used to indicate whether or not to include a given link, the file extension and/or type attribute are still used to determine which underlying player technology to use. If the most appropriate player technology can not be determined, the default, or "catch-all" technology will be used. In some cases, this may result in the Yahoo! Media Player only playing back the first 30 seconds of the song. So, if your link has a file extension that does not accurately indicate the type of media it represents, go ahead and use the type attribute, even in conjunction with the "htrack" class.

 Album Art

You can set the image which is displayed in the player during a song. To do this, put an img element within the playable link.

For example:

<a href="example.mp3"><img src="example.png" alt="" />my song</a>

The dimensions of the image should be square, not rectangular.

If you don't want the image to show up directly in the main web page, add style="display:none" to your img tag:

<a href="example.mp3"><img src="example.png" alt="" style="display:none" />my song</a>

 Playlists

An easy way to add an entire playlist and all the song metadata to your page is to link to an XSPF file. For example:

<a href="http://example.com/playlist.xspf" type="application/xspf+xml">My Favorite Playlist</a>

Similarly to the way it works with tracks, you can use the "type" attribute to indicate that a link should be treated as a playlist, when the file extension is not ".xspf." If the link has a ".xspf" file extension, use of the type attribute is unnecessary.

Here is a sample file:

<?xml version="1.0" encoding="UTF-8" ?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
  <trackList>
    <track>
      <location>http://example.com/song.mp3</location>
      <title>Song Title</title>
      <creator>Artist</creator>
      <album>Album</album>
      <image>http://example.com/art.jpg</image>
    </track>
  </trackList>
</playlist>

These are the main XSPF fields that you need to know about:

location:

The URL to the audio file.

title:

Name of the song, title of the podcast episode, etc.

creator:

Name of the person or entity that authored the work. For a song this would be the composer.

album:

Name of the album, CD or compilation that the work is from, if any.

image:

URL for an image to use as album art in the player while the media is rendering. Dimensions should be square, not rectangular.
  • Tip: At the current time, your playlist must be hosted on the same domain as the current web page, per the same-origin security policy. In a future release, this restriction will be removed.

 

How To Use

This play button will appear next to each of your audio links: Image:Inlineplaybutton.gif

Press a play button. The Yahoo! Music Player will open: Image:Exampleplayer.gif

 Tips

While a media file is being played, the inline play button next to that link on the page will turn into a pause button. You can find the location within the page of the currently playing song by looking for that pause button.

A publisher can override the speaker image in the player by putting an image within the media link. See How To Link.

 Browser support

The Yahoo graded browser support matrix is the basic approach to browser support.

An A-grade browser is on a whitelist of platforms which are specifically supported. Bugs specific to that browser will be fixed. The user experience on any A-grade browser should be excellent.

A C-grade browser is on a blacklist of platforms which are specifically unsupported. There are important bugs in support for that platform and no plans to fix them. In a C-grade browser the player hides itself and lets the original media link do the work. Clicking on the link will invoke whatever helper application you have installed in your browser.

An X-grade browser is on its own. The player will launch and try to operate, but problems specific to that platform will not be fixed.

It is a bug if a potentially capable browser is treated as C-grade rather than X-grade.

Win 98 Win 2000 Win XP Win Vista Mac 10.3.x Mac 10.4 Linux
IE 7.0 X-grade X-grade A-grade A-grade - - -
IE 6.0 A-grade A-grade A-grade X-grade - - -
Firefox 2.x A-grade A-grade A-grade A-grade A-grade A-grade C-grade
Firefox 1.5.x A-grade A-grade A-grade X-grade A-grade A-grade C-grade
Opera 9.x C-grade C-grade C-grade C-grade C-grade C-grade C-grade
Safari 2.0x X-grade X-grade X-grade X-grade X-grade A-grade -
Netscape <=7.x C-grade C-grade C-grade C-grade C-grade C-grade -


As of December 30, 2007 all Linux browsers are being treated as C-grade rather than X-grade. This is a bug and a fix is in progress.

As of February 8, 2008, the decision is to make all Linux browsers X-grade and only turn them back to C- if there turn out to be severe errors. X-grade is pretty much in the spirit of Linux.

Created by jevs Jul 5, 2008 at 10:27am. Last updated by jevs Jul 5.

About Tweets and Blips

jevs jevs created this social network on Ning.

Create your own social network!

© 2008   Created by jevs on Ning.   Create your own social network

Report an Issue  |  Feedback  |  Privacy  |  Terms of Service