Play Audio From WordPress Blog
Sunday, August 02nd, 2009 | Author:

How to play audio from your wordpress blog:

  1. Upload a mp3 file to your server, or get the web address of a mp3 file
  2. Install mp3 plugin.
  3. Place a tags/code in your blog post.

Step 1: Upload a mp3 file

1)  You can use the Media Library to upload a mp3, or use ftp software.  Once you upload the file, you determine where you copied it to.  If you used the Media Library to upload it, then the File URL can be found in the Edit Media Dialog in Media Library.  Go ahead and copy this to your clipboard for later.

Edit Media Dialog

Edit Media Dialog

Step 2 and 3: Install a plugin and place code/tag into post

Note: Installing the plugin is a one time step.

Listed below are several of the most popular approaches, each with the pro/cons:


Non-Embed player, but a standard link

If you don’t want to embed a player, you can always just give them a link to the mp3 like this. -> Click here to play the audio
Pros:

  • No Plugin Is Needed
  • Client Machine decides how to listen to file.

Cons:

  • Takes the user to a different page.
  • Client Machine decides how to listen to file. This can very from machine to machine, and you have no control over this.

Code:

<a href="http://www.hyperspider.com/wp-content/
uploads/2009/08/WordPressBlogAudio.mp3">Click here to play the audio</a>


WordPress Audio Plugin

This is a very popular embeded mp3 player:
http://www.1pixelout.net/code/audio-player-wordpress-plugin/ Please follow the instruction on the site for installation steps. No need to repeat here.

Default Layout of the plugin

The default layout is good enough for most people.

[Click here for sample Audio]
[audio:http://www.hyperspider.com/wp-content/uploads/2009/08/WordPressBlogAudio.mp3]

Code: Once you have the plugin installed it is a matter of putting the [audio: path to file] in your blog post.

[audio:http://www.hyperspider.com/wp-content/uploads/2009/08/WordPressBlogAudio.mp3]
Custom Layout of the plugin

However, if you want more control of the look and feel, there are many different settings you can choose from.
[Click here for sample Audio]
[audio:http://www.hyperspider.com/wp-content/uploads/2009/08/WordPressBlogAudio.mp3|autostart=no|leftbg=0x0000FF|rightbg=0x0000CC|lefticon=0xFF0000|righticon=0xCC0000|rightbghover=0xFF0000|righticonhover=0xCC0000|slider=0x00FF00]

Code:

[audio:http://www.hyperspider.com/wp-content/uploads/2009/08/WordPressBlogAudio.mp3|autostart=no|
leftbg=0x0000FF|rightbg=0x0000CC|lefticon=0xFF0000|righticon=0xCC0000|
rightbghover=0xFF0000|righticonhover=0xCC0000|slider=0x00FF00]

Pros:

  • Very configurable
  • Lots of existing users
  • Looks alright

Cons:

  • Uses flash, which is not supported on many devices

WPAudioPlugin

WP Audio is another popular Audio player. Goto http://wpaudio.com/ for full installation instructions.

Default Setup
[Click the arrow to play] or [Click the Name to download]
Audio in WordPress
Code:

[wpaudio url="http://www.hyperspider.com/wp-content/uploads/2009/08/WordPressBlogAudio.mp3"
text="Audio in WordPress"#93;

[The following doesn't allow for Download]

Code:

[wpaudio url="http://www.hyperspider.com/wp-content/uploads/2009/08/WordPressBlogAudio.mp3" 
text="Audio in WordPress" dl="0"#93;

Pros:

  • Very simple and straight forward.
  • Does not use flash

Cons:

  • Limited options for configuration, however, website states that skinning is being worked on.
  • When doing some testing, this plugin did NOT work on Vista/IE8. More research will need to be done, but troublesome none the less.

Google MP3 Player.

If you don’t want to install a wordpress plugin you can just use the flowing code in your post.

Code:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="400" height="27" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<param name="bgcolor" value="#ffffff" />
<param name="flashvars" value="playerMode=embedded" />
<param name="src" value="http://www.google.com/reader/ui/3247397568-audio-player.swf?audioUrl=http://www.hyperspider.com/wp-content/uploads/2009/08/WordPressBlogAudio.mp3" />
<param name="wmode" value="window" />
<param name="quality" value="best" />
<embed type="application/x-shockwave-flash" width="400" height="27" src="http://www.google.com/reader/ui/3247397568-audio-player.swf?audioUrl=http://www.hyperspider.com/wp-content/uploads/2009/08/WordPressBlogAudio.mp3" quality="best" wmode="window" flashvars="playerMode=embedded" bgcolor="#ffffff">
</embed>
</object>

Pros:

  • Does not need a plugin installed, so this approach can be used anywhere. Including the sidebar, etc.

Cons:

  • Not a plugin, so all the code has to be entered in

I hope this post gives you a feel for the different ways of playing audio in your WordPress blog. There are many others to choose from, but these are a good representation of the most popular ones.

.