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 href="example.mp3">a song</a>
type:
<a href="http://example.com/mysong" type="audio/mpeg">a song</a>
tabindex:
<a href="example1.mp3" tabindex="2">second song</a><a href="example2.mp3" tabindex="1">first song</a>
title:
<a href="example.mp3" title="Movin' Right Along">a song</a>
class="htrack":
<a href="example" class="htrack">a song</a>
You tell the music player which links are playable using one of these methods:
<a href="http://example.com/mysong.mp3">this is a song</a>
type attribute to hint that the file type is playable:
<a href="http://example.com/mysong" type="audio/mpeg">this is a song</a>
<a href="http://example.com/mysong.php" type="audio/mpeg">this is a song</a>
<a href="http://example.com/mysong.mp3" type="image/png">this is a song</a>
<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.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>
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:
title:
creator:
album:
image:
This play button will appear next to each of your audio links: ![]()
Press a play button. The Yahoo! Music Player will open: 
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.
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.
© 2008 Created by jevs on Ning. Create your own social network