Flash MP3 Players and WordPress

• Tweet

I had intended to write a quick post on some of my personal favorite flash MP3 players but it soon became apparent that each player I had intended to write about deserved more than just a cursory mention. So, for that reason, I’ll make a separate post for each MP3 player (forming an integrated series) with various bits of code and other useful information.

Based on recent feedback, it’s become quite apparent that shortcode is often appreciated, so for each player in this series I’ll post both conventional means of playing the audio as well as providing shortcode that is compatible with a WordPress blog.

You can download the code at the bottom of this page. I’ve also provided sample shortcode for the maxi player at the bottom of this post.

Flash MP3 Player Series

The Flash MP3 player series doesn’t have the following nor the popularity that it deserves. Of the 5 available players, I’ll be posting information on the main four that can be easily and quickly implemented into your blog.

If you have any feedback or questions, please post them as a comment below this post.

Mini Player

The mini player has the least functionality of any of the players, but it’s also the smallest in size.

Example output

Example HTML

<object type="application/x-shockwave-flash" data="player_mp3_mini.swf" width="200" height="20">
     <param name="movie" value="player_mp3_mini.swf" />
     <param name="bgcolor" value="#ff0000" />
     <param name="FlashVars" value="mp3=test.mp3" />
</object>

Mini Player Shortcode. You should add the following code to your theme’s functions.php file.

function mp3player_mini($atts, $content) {
extract(shortcode_atts(array(
    'mp3' => 'http://',
    'autoplay' => '0',
    'loadingcolor' => 'fccb0c',
    'buttoncolor' => 'ffffff',
    'slidercolor' => 'cccccc',
    'byteslimit' => 'cccccc',
    'width' => '200',
    'height' => '20'
  ), $atts));
	foreach( $atts as $key => $value){ 
	$options .= "&$key=$value";
	}
$options = substr($options, 1);
echo "options are..... $options<br><br>";

return "<object type=\"application/x-shockwave-flash\" data=\"http://www.internoetics.com/audio-players/flash-mp3-player-net/player_mp3_mini.swf\" width=\"$width\" height=\"$height\">
	<param name=\"movie\" value=\"http://www.internoetics.com/audio-players/flash-mp3-player-net/player_mp3_mini.swf\" />
	<param name=\"bgcolor\" value=\"#ff0000\" /><param name=\"FlashVars\" value=\"$options\" />
</object>";
}
add_shortcode('mp3mini', 'mp3player_mini');

Example shortcode would be as follows:

In the above example, I have changed the button colour to 000000 (or black). Note that I’ve used a six-digit code for the colour without the pound sign (#). If you want to change the colour of the background (which is red by default), you should change it in the function code. Name.mp3 is the full path (starting with http:// to the MP3 file you want to play).

The options are very limited in the mini player; so you’re best considering the Normal player or, even better, the Maxi Player if you want more control over player presentation.

Normal Player

The normal player isn’t really worth using given the additional features of the maxi player. It appears that it was an early release that is no longer supported.

Example output:

Example HTML

<object type="application/x-shockwave-flash" data="player_mp3.swf" width="200" height="20">
     <param name="movie" value="player_mp3.swf" />
     <param name="FlashVars" value="mp3=test.mp3" />
</object>

Normal Player Shortcode:

You should add the following code to your theme’s functions.php file.

function mp3player_normal($atts, $content) {
extract(shortcode_atts(array(
    'mp3' => 'http://',
    'autoplay' => '0',
    'loop' => '0',
    'volume' => '160',
    'showstop' => '1',
    'skin' => 'http://',
    'showinfo' => '0',
    'loadingcolor' => '',
    'bgcolor1' => '',
    'bgcolor2' => '',
    'buttoncolor' => '',
    'buttonovercolor' => '',
    'slidercolor1' => '',
    'slidercolor2' => '',
    'buttoncolor' => '',
    'slidercolor' => '',
    'sliderovercolor' => '',
    'textcolor' => '',
    'bgcolor' => '',
    'byteslimit' => 'cccccc',
    'width' => '200',
    'height' => '20'
  ), $atts));
	foreach( $atts as $key => $value){ 
	$options .= "&$key=$value";
	}
$options = substr($options, 1);

return "<object type=\"application/x-shockwave-flash\" data=\"http://www.internoetics.com/audio-players/flash-mp3-player-net/player_mp3_mini.swf\" width=\"$width\" height=\"$height\">
	<param name=\"movie\" value=\"http://www.internoetics.com/audio-players/flash-mp3-player-net/player_mp3.swf\" />
	<param name=\"FlashVars\" value=\"$options&showstop=$showstop\" />
</object>";
}
add_shortcode('mp3normal', 'mp3player_normal');

Example shortcode use is as follows:

[mp3normal mp3="http://www.file.com/loc/name.mp3" option1="something"]

You have a large number of options to choose from. Options should be defined in your shortcode by option=”something”.

Maxi Player

The maxi player is the most complete in terms of its various functions. A large number of parameters can be changed to style the player and add colour in a manner that best fits the theme of your website. If you were to install a function for any one singular player – this would be it.

Example output

Example HTML

<object type="application/x-shockwave-flash" data="player_mp3_maxi.swf" width="200" height="20">
     <param name="movie" value="player_mp3_maxi.swf" />
     <param name="FlashVars" value="mp3=test.mp3" />
</object>

Maxi Player shortcode. You should add the following to your theme’s functions.php file.

function mp3player_maxi($atts) {
extract(shortcode_atts(array(
    'mp3' => 'http://',
    'width' => '200',
    'height' => '20',
    'config' => '',
    'configxml' => '',
    'autoplay' => '0',
    'autoload' => '',
    'loop' => '0',
    'skin' => 'http://',
    'volume' => '160',
    'showstop' => '1',
    'showinfo' => '',
    'showvolume' => '1',
    'showslider' => '',
    'showloading' => '',
    'loadingcolor' => '',
    'bgcolor1' => '',
    'bgcolor2' => '',
    'buttoncolor' => '',
    'buttonovercolor' => '',
    'slidercolor1' => '',
    'slidercolor2' => '',
    'sliderovercolor' => '',
    'textcolor' => '',
    'bgcolor' => '',
    'buttonwidth' => '',
    'sliderwidth' => '',
    'sliderheight' => '',
    'volumewidth' => '',
    'volumeheight' => '',
    'byteslimit' => 'cccccc'
  ), $atts));
	foreach( $atts as $key => $value){
	$options .= "&$key=$value";
	}
$options = substr($options, 1);

return "<object type=\"application/x-shockwave-flash\" data=\"http://www.YourDomain.com/audio-players/YourPath/player_mp3_mini.swf\" width=\"$width\" height=\"$height\">
	<param name=\"movie\" value=\"http://www.YourDomain.com/audio-players/YourPath/player_mp3_maxi.swf\" />
	<param name=\"FlashVars\" value=\"$options&showstop=$showstop&showvolume=$showvolume\" />
</object>";
}
add_shortcode('mp3maxi', 'mp3player_maxi');

Example maxi shortcode is as follows:

The Multi Player

The multi player is designed to play multiple tracks. It is very customisable and with load via a config file if desired (not required with shortcode). It loads rather quickly and has a large number of customisation options.

In its most basic implementation, use the following HTML code:

<object type="application/x-shockwave-flash" data="player_mp3_multi.swf" width="200" height="20">
     <param name="movie" value="player_mp3_multi.swf" />
     <param name="FlashVars" value="mp3=test.mp3|test2.mp3" />
</object>

Example output

Multi player Shortcode. Paste the following into your theme’s functions.php file.

function mp3player_multi($atts) {
extract(shortcode_atts(array(
    'mp3' => 'http://',
    'config' => '',
    'configxml' => '',
    'title' => '',
    'playlist' => '',
    'width' => '200',
    'height' => '20',
    'volume' => '160',
    'showlist' => '',
    'showvolume' => '1',
    'showinfo' => '',
    'autoplay' => '0',
    'loop' => '0',
    'shuffle' => '',
    'skin' => 'http://',
    'loadingcolor' => '',
    'bgcolor1' => '',
    'bgcolor2' => '',
    'buttoncolor' => '',
    'buttonovercolor' => '',
    'slidercolor1' => '',
    'slidercolor2' => '',
    'sliderovercover' => '',
    'textcolor' => '',
    'bgcolor' => '',
    'playlistcolor' => '',
    'playlistalpha' => '',
    'currentmp3color' => '',
    'scrollbarcolor' => '',
    'scrollbarovercolor' => '',
    'buttonwidth' => '',
    'sliderwidth' => '',
    'sliderheight' => '',
    'volumewidth' => '',
    'volumeheight' => '',
    'sliderheight' => '',
    'showslider' => '',
    'showloading' => '',
    'playlistrss' => '',
    'showplaylistnumbers' => ''
  ), $atts));
	foreach( $atts as $key => $value){
	$options .= "&$key=$value";
	}
$options = substr($options, 1);

return "<object type=\"application/x-shockwave-flash\" data=\"http://www.YourDomain.com/audio-players/YourPath/player_mp3_multi.swf\" width=\"$width\" height=\"$height\">
	<param name=\"movie\" value=\"http://www.YourDomain.com/audio-players/YourPath/player_mp3_multi.swf\" />
	<param name=\"FlashVars\" value=\"$options&showvolume=$showvolume\" />
</object>";
}
add_shortcode('mp3multi', 'mp3player_multi');

Example shortcode use:

[mp3normal mp3="file.mp3|file2.mp3|file3.mp3" title="Name1|Name2|Name3" option1="something"]

When using the multi player you can define options via a text or XML file. If using a file (that you must name config_multi.txt), it should look like this:

mp3=test1.mp3|test2.mp3|test3.mp3|test4.mp3|test5.mp3
title=Test1|Test2|Test3|Test4|Test5
bgcolor1=9293a9
bgcolor2=808094
buttoncolor=dddddd
buttonovercolor=f9bf37
slidercolor1=dddddd
slidercolor2=cccccc
sliderovercolor=f9bf37
textcolor=dddddd
playlistcolor=999999
currentmp3color=f9bf37
scrollbarcolor=cccccc
scrollbarovercolor=f9bf37
showvolume=1

It is important that you set the height paramater if you have a large playlist. Failing to do so will result in a default height of 20. By default, the maxi player shortcode will show the volume (although you can remove it by declaring it as an option).

If you chose an XML file (config_multi.xml) – ideal if you’re dumping data from a database – it should look like this.

<?xml version="1.0" encoding="UTF-8"?>
<config>
<param name="mp3" value="test1.mp3|test2.mp3|test3.mp3|test4.mp3|test5.mp3|test.mp3|test.mp3" />
<param name="title" value="Name1|Name2|Name3|Name4|Name5" />
<param name="height" value="150" />
<param name="width" value="250" />
<param name="bgcolor" value="cccc99" />
<param name="bgcolor1" value="e79a2d" />
<param name="bgcolor2" value="d38c29" />
<param name="buttoncolor" value="dddddd" />
<param name="buttonovercolor" value="f9bf37" />
<param name="slidercolor1" value="dddddd" />
<param name="slidercolor2" value="cccccc" />
<param name="sliderovercolor" value="f9bf37" />
<param name="textcolor" value="dddddd" />
<param name="playlistcolor" value="999999" />
<param name="currentmp3color" value="f9bf37" />
<param name="scrollbarcolor" value="cccccc" />
<param name="scrollbarovercolor" value="f9bf37" />
<param name="showvolume" value="1" />
<param name="showinfo" value="1" />
</config>

General Help Information

This information is from the Flash-MP3 website. You may find more information there than I’m making available here.

1. There is a speed issue

You must encode your MP3′s at 44 KHz.

2. The background is not transparent

Add the parameter <param name="wmode" value="transparent"/> to <object> instead of <param name="bgcolor" value="#000000"/>.

3. The configuration file doesn’t work

When the file is in a different domain, it is necessary to create a crossdomain.xml file at the root of the site hosting the file. It must contain the domains authorized to load the files.

If the player is hosted on resources.internoetics.com and loads the video on http://download.internoetics.com/medias/config.txt, it is necessary to create the following XML file (http://download.internoetics.com/crossdomain.xml):

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
     <allow-access-from domain="resources.internoetics.com" secure="false" />
</cross-domain-policy>

Sample shortcode implementation

The following shortcode is provided as to how to implement the maxi player – the more popular of the bunch.

Example 1: Here is the player with nothing other than the three basic controls – play, stop and volume. A nice minimalistic approach.

Example 2: In this example, I’ve merely changed the color of buttons.

Example 3: I often use a very minimal presentation for very short audio files. An example is as follows:

You can download the above shortcode and the flash players by clicking here. If you’re a developer, you can download the source here.

As you can tell, it’s quite easy to customise the player with the available options to achieve something that will fit with the theme of your site.

First Name: Your Email Address:

If you liked this article, you may also like:

1. Automatically Convert MP3 links to Audio Players
2. [Shortcode] Insert Youtube videos into your blog with shortcode
3. WordPress Audio Player and Shortcode
4. PageRank API and WordPress PageRank Shortcode
5. [Shortcode] examples [3] – Text Boxes