Yahoo! Media Player

UPDATE: July 01, 2013

It has come to my attention that this plugin has vanished from Yahoo without a trace. If you were wise enough to host your own local copy, my hat’s off to you. I was not so wise. However, it’s sudden disappearance forced me to build my own WordPress plugin, PressPlay Lite, which is now available on WordPress.org. A full featured version is in development, btw.

ORIGINAL POST:

This innovative script from Yahoo! has automatically detected the following textual MP3 links and embedded a simple play button next to each of them.

  1. Afterworld
  2. Frame Of Reference
  3. The Heart To Tell
  4. Watch Your Step
  5. Coma Fantasy
  6. Remiss

It also automatically organizes all recognized MP3 links within the page into a playlist, which appears when any play button is clicked. Furthermore, visitors can choose to keep the playlist running in a separate window while they continue to browse your site.
All you need to do is add the normal textual MP3 links you see above as the highlighted song titles, and place the following code somewhere above the first link (place it in the <head> tag to use exclusively throughout the site):
[code]<script type=”text/javascript” src=”http://mediaplayer.yahoo.com/js”></script>[/code]
About: JavaScript-based. Automatically embeds play button next to audio links. Creates playlist out of all audio links on page. Option to open playlist in new tab/window.
Positive: Easiest setup – by Far ! Create an MP3 link, and it’s there! The button design is neutral enough to blend in with any site.
Negative: Buffering could be smoother – I have noticed some clipping on larger files. You are stuck with a “master” playlist – cannot break it up into smaller groups. Also stuck with the built-in player design, including the floating button seen in the bottom-left of the screen.
Source: Yahoo! Media Player

Google Reader Player

This simple Flash-based code from Google embeds the following player controls.
[code]<embed type=”application/x-shockwave-flash” width=”400″ height=”27″ src=”http://www.google.com/reader/ui/3523697345-audio-player.swf” flashvars=”audioUrl=http://yourdomain.com/audio_files/song.mp3″ quality=”best”></embed>[/code]

Features: Flash-based. Plays single track/file.
Positive: Great for the occasional sound clip & large files. Easy to swap in your own MP3 file paths.
Negative: Cannot modify colors/dimensions. Sticks out like a sore thumb.
Source: Google Reader Player

Play Tagger by Delicious

UPDATE: July 1, 2013

Just like Yahoo! MediaPlayer, this plugin has also mysteriously disappeared. However, you can get something just like it (better, IMHO), called PressPlay Lite, which is now available on WordPress.org.

ORIGINAL POST:

Not shown. As easy to setup as Yahoo! Media Player…
[code]<script src=”http://static.delicious.com/js/playtagger.js” type=”text/javascript”></script>[/code]
… but doesn’t readily display as expected. Also, hitting play bumps the corresponding text to the right for no apparent reason.
Positive: Easy implementation.
Negative: Button doesn’t automatically align to text. Can’t change color.
Source: Play Tagger by Delicious

Audio Player (WordPress Plugin)

A WordPress Plugin that adds this sleek Flash controller to the MP3 files of your choice. Also available as a stand-alone [audio:http://frameofreferencejazz.com/wordpress/wp-content/uploads/2011/04/03-The-Heart-to-Tell-1.mp3|titles=The Heart To Tell]
Positive: Stylish. Can match your theme’s color scheme.
Negative: Requires additional CSS/HTML coding to control positioning on the page. Not easily managed by non-developers.
Source: WPAudioPlayer.com

XSPF Player Solutions

Although it is Flash-based, I have found xspf_player.swf to be one of the most versatile mp3 players out there. It may not be the easiest to set up, but once it’s in place, you are rewarded with total control. Its parameters include, background-color, text-color, autoplay, autoload, shuffle, and much more. Plus, it supports multiple playlists per page! This example, as well as the code snippets below, are taken from the existing player/playlist at FrameOfReferenceJazz.com. This illustrates another perk of this particular player– you can import playlists from anywhere on the web! All you need for that is the HTML portion with fully-qualified URLs. But I expect that you’ll want to promote your own audio, so simply replace my URLs with yours. By the way, my purpose here is to create a one-stop, concise, Cut-&-Paste-ready, online instruction manual, so feel free to contribute.

Step-by-Step

1. Download Player. First of all, find yourself an up-to-date version on the in’rnet. Try xspf-player.com. I went there today and got a nice beta version–3.9. There is also a tutorial page, which was fairly helpful, but it still left me with questions.
Unzip your dowloaded version and put the folder somewhere logical. Mine is here: “http://www.framofreferencejazz.com/audio/xspf_player_beta/
That takes care of the player.

2. Playlist. Now we need a playlist. Create a new file in a text or coding application. I love Coda, but even TextEdit will work. The format should look like this (no need to close the <?xml> tag):
[code]
<?xml version=”1.0″ encoding=”UTF-8″?>
<playlist version=”1″ xmlns = “http://xspf.org/ns/0/”>
<title>Sample Playlist</title>
<trackList>
<track>
<location>http://frameofreferencejazz.com/audio/song_title.mp3</location>
<image>http://frameofreferencejazz.com/audio/img/album_cover.jpg</image>
<annotation>”Song Title” Artist Name</annotation>
</track>
</trackList>
</playlist>
[/code]
Note: Be sure to double check the characters after using Cut & Paste. I have often had to retype them in order for them to function properly. However, I have tested them out here and they seem to work fine.
Note: Track images should be about 130px by 130px.

Save your new playlist with the extension .xspf. Simply force the extension and don’t worry that most apps won’t recognize it– the xspf_player will!

3. CSS. Since the HTML code can get rather long, it might be helpful to start with a little CSS. The following div class will surrond the rest of the code, making it easier to Cut & Paste the entire xspf_player wherever you desire. Paste this code into your style.css:
[code]
.xspf-wrap {
width: 400px;
border: 1px solid #373737;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
padding: 3px;
background: #272727;
}
[/code]
Note: “400px” is the default width of the xspf_player. The 2px padding gives it nice border which will blend in with the player’s inner borders. Later, you can elaborate on this class in order to position it however you like. Mine is floated right with defined margins.

4. HTML. Now we’re ready for the tricky part. The following code is exactly the same as what is placed at the top of the page. To implement your own, simply replace my URLs with your own. Notice that much of the same info appears twice. And they must mirror each other or it won’t work.
[code]
<div class=”xspf-wrap”>
<object type=”application/x-shockwave-flash” data=”http://www.frameofreferencejazz.com/audio/xspf_player_beta/xspf_player.swf?playlist_url=http://www.frameofreferencejazz.com/audio/xspf_player_beta/forj_playlist.xspf&autoplay=0&autoload=1&repeat_playlist=1&shuffle=1&bg_color=454545&txt_color=E6E6E6&volume_level=80″ width=”400″ height=”170″><param name=”allownetworking” value=”internal” />
<param name=”movie” value=”http://www.frameofreferencejazz.com/audio/xspf_player_beta/xspf_player.swf?playlist_url=http://www.frameofreferencejazz.com/audio/xspf_player_beta/forj_playlist.xspf&autoplay=0&autoload=1&repeat_playlist=1&shuffle=1&bg_color=454545&txt_color=E6E6E6&volume_level=80″ />
<param name=”allowScriptAccess” value=”never” />
<param name=”enableJSURL” value=”false” />
<param name=”enableHREF” value=”false” />
<param name=”saveEmbedTags” value=”true” />
<param name=”quality” value=”high” />
<param name=”wmode” value=”transparent” />
</object>
</div>
[/code]
Note: A great explanation of the exact formatting for this can be found at xspf-player.com, along with a complete list of parameters. Stick to “1“s and “0“s for the boolean values, instead of “true” and “false.”

5. Resizing. If you plan on using track images, the minimum height should be 170px. However, I originally came across xspf_player while searching for something low-profile. An older version had a “slim” model, but you can simply resize this one to get the same effect. 17px is the minimum height in this case. I just placed this variation into a local recording studio web site, BerkleySound.com.

6. Display Only on Home Page. A recent challenge was to place this slim version in the header, above the main menu, but for it to only be displayed on the Home page. There seemed to be several solutions out there, but luckily the one that worked for me was the simplest. Open up the header.php file and select your favorite place to put this:
[code]
<?php
if (is_home())
echo ‘<div>STEP 4 GOES HERE</div>’;
?>
[/code]
Note: Earlier versions of the xspf_player required additional code in order to work across all browers, such as an additional <embed> tag, and even some javascript. I got sucked into it all for a moment before I realized there’s a beta way! View my results at BerkleySound.com