Yahoo Media Player Using an XSPF Playlist

The player is shown here set up with an audio playlist so that it will play all the songs once started.

It can also be set up to play single tracks in which case the player would be hidden and just the play button exposed.

The code has been written so that it can be displayed in an HTML Snippet in iWeb.


Use the freeware application Xpiff to set up your playlist.xspf.


The audio files and the playlist need to be uploaded to a folder on the server and the playlist.xspf is referenced in the code.


There are a number of options in the javascript to customize the players functions and more can be found about this HERE.

<script type="text/javascript" src="http://webplayer.yahooapis.com/player-beta.js"></script>

<script type="text/javascript">

    var YWPParams =

    {

        playlink:true,

autoplay:false,

autoadvance:true,

       volume:0.5,

displaystate:1

    };

</script>

<div style="width: 550px; height: 120px">

<a href="http://www.domain-name.com/folder-name/playlist.xspf" type="application/xspf+xml">Playlist Name</a>

</div>

Paste the above code into an HTML Snippet.

Enter the URL to the playlist.xspf in place of the text marked in red and give the playlist a name by replacing the text in blue.

The section of the code marked in yellow calls up the player.

The javascript marked in green is where the player functions are set.

playlink:true  enables the player block to appear on the webpage when the player is started.

autoplay:false  is set to "true" to enable the player to load and play when the web page downloads

autoadvance:true  tells the player to play the songs on the playlist one after the other

displaystate:1  enables the diminished player to appear on the web page while the page loads. If this is set to 0 only the tiny button next to the player name will load.

volume:0.5  sets the initial volume of the player and can be anywhere from 0.1 to 1.0


NOTE: If you add more functions to the javascript, each line must be finished with a comma except the last one.


The last part of the code is the HTML which sets the size of the snippet so that player will appear in full. It also contains the URL to the playlist and the Player Name.


To substitute  single song file for the playlist replace the whole of the <a> tag with this...


<a href="http://www.domain-name/folder-name/song-title.mp3">Song Title</a>