Adding an audio player to a WordPress blog

Adding an audio player to a WordPress blog

The following tutorial steps you through the process of adding an mp3 player to a WordPress blog. (See this tutorial to add an audio player to a nonWordPress blog.)

Begin by downloading this plug-in:

File name: audio-player.zip

Version: 1.2.3

Requirements: WordPress 1.5 - 2.1

This plug-in only works in posts and pages. It does NOT work in headers, sidebars or footers and I do not provide support for placing it there.

Other important note: This plug-in only plays MP3 files. This is a limitation of the Adobe Flash Player.

Usage

Once installed, this plug-in allows you to insert mp3 audio files into your posts and pages. Use the following syntax:

[audio:name_of_mp3_file.mp3]

This code will insert a flash player and will load the file named name_of_mp3_file.mp3 located in your audio files folder. You can store your audio files anywhere in the web root as long as you update the path in the plug-in’s options panel. The default is /audio.

You can also use absolute paths to link to files on other servers:

[audio:http://www.somedomain.com/path/to/name_of_mp3_file.mp3]

Audio Player can also play a sequence of audio clips. Use commas to separate the files:

[audio:name_of_mp3_file1.mp3,name_of_mp3_file2.mp3,name_of_mp3_file3.mp3#093;

You can also pre-append and post-append a clip to all your players. This is explained in the Podcasting section below.

Examples

Default color scheme

Custom color scheme

Podcasting

If you are using the player for a podcasting blog, Audio Player has special options just for you.

Enclosures

If you are unsure what an enclosure is, read the definition on Wikipedia. You have 3 options:

• If you set your enclosures manually, Audio Player can insert a player automatically at the end of your posts. Select the Enclosure integration option in the Audio Player options panel.
• If you let WordPress set enclosures automatically (by reading mp3 links in your posts), you can still use the Enclosure integration option.
• You can also use the [audio] syntax but you must use absolute URLs:

  e.g. http://www.somedomain.com/path/to/name_of_mp3_file.mp3

  WordPress will automatically detect the file and set the relevant enclosure option for you.

Pre/Post appended clips

You may wish to pre-append or post-append audio clips into your players. To do this, enter the full urls in the relevant section of the options panel. The pre-appended audio will be played before the main audio, and the post-appended will come after. A typical podcasting use-case for this feature is adding a sponsorship message or simple instructions that help casual listeners become subscribers. This will apply to all audio players on your site. Your chosen audio clips should be substantially shorter than your main feature.

RSS feeds

You have a choice over what to show in your RSS feed:

• A download link: Choose this if you are OK with subscribers downloading the file.
• Nothing: Choose this if you feel that your feed shouldn’t contain any reference to the audio file.
• Custom: Choose this to use your own alternative content for all player instances. You can use this option to tell subscribers that they can listen to the audio file if they read the post on your blog. You can set the content in the options panel.

Go to the options panel to set these options.

The “chipmunk” effect

The Macromedia Flash player has a problem playing files that are encoded at a rate that is not a multiple of 11.025 kHz. This effect is sometimes called the “chipmunk” effect: the file is played at double speed. To avoid this, encode MP3s at 11.025 kHz 22.050 kHz or 44.100 kHz.

Color scheme

The entire player color scheme is customizable. Use the Audio Player options panel in your WP admin to set the color scheme of your player. You can also change the colors per player instance by using runtime options. Here are the colors that you can set:

Runtime options

Use these if you want to use a different color scheme for a particular player instance. You can also make the player open automatically or loop the loaded clip. You can pass a number of options to a player instance. To do this use the following syntax:

[audio:name_of_mp3_file.mp3|option1=value|option2=value]

Example:

[audio:name_of_mp3_file.mp3|autostart=yes|bgcolor=0x000000]

This will set the main background color of the player to black and automatically start the player when the page loads.

Installation

1. Extract and upload the files to your plug-ins folder
   You should end up with this folder structure:
   
2. Create a folder in your blog root (where your wordpress install lives) where you will store all your mp3 files
   I recommend an audio folder in the root of your blog so it doesn’t interfere with your WP install. If you wish to use another folder, remember to change the audio files directory option on your options panel.
3. Activate the plug-in in your WP admin
4. Go to Options > Audio Player in the WP admin
   Here, you can choose how you want to use Audio Player and also set the colors to match your site’s design.

Upgrading from 0.x to 1.x

Once installed, the old player is overwritten with the new one and all color options should be transfered to the new scheme. Some adjusting to the slider and loader bar colors might be necessary.

Upgrade wizard

Audio Player comes with an upgrade wizard. On the options panel, you can find out if a new update is available by clicking the Check for updates button. If an update is available, you will be prompted to open the upgrade wizard. Simply click Upgrade and the wizard will download the latest version and install it for you. Note: The upgrade wizard relies on some PHP functionality that is not available on all server configurations. You host may have disabled these features, in which case the upgrade wizard will be disabled.

Source code

The latest source code is available for download on the WordPress Pugins site. This includes the Flash source. Important: only download this code if you want to have a go at modifying the plug-in or if you want to test the latest development version. The latest stable release is the one you can download on this website.

Download

Download audio-player.zip

Related:

• Adding an audio player to a nonWordPress blog