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
- A URL for an audio file. For example:
<a href="music.mp3">a song</a>
- 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://music.com/mysong" type="audio/mpeg">a song</a>
- 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 music:
<a href="music1.mp3" tabindex="2">second song</a><a href="music2.mp3" tabindex="1">first song</a>
- The "title" attribute can be used to specify the audio file's name. For artist:
<a href="artist.mp3" title="Movin' Right Along">a song</a>
- Explicitly marks audio that should be added to the play queue. For music:
<a href="music" class="htrack">a song</a>
You tell the music player which links are playable using one of these methods:
- Use a file extension that suggests a playable file type:
<a href="http://example.com/mysong.mp3">this is a song</a>
- Use the
typeattribute 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>
- Give the link the class "htrack", like this:
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">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.
<a class="htrack" href="http://example.com/mysong.php" type="application/xhtml+xml">this is a song</a>
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.
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.
<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:
- The URL to the audio file.
- Name of the song, title of the podcast episode, etc.
- Name of the person or entity that authored the work. For a song this would be the composer.
- Name of the album, CD or compilation that the work is from, if any.
- URL for an image to use as album art in the player while the media is rendering. Dimensions should be square, not rectangular.
- Tip: your playlist does *NOT* have to be hosted on the same-origin security policy, but it does have to be accessible to anybody on the open web.
To conceal links from the user, see Link hiding