Intereactive Web Design - Sugar Land, TX

The Problem

As just about everyone knows the iPhone is incapable of playing any sort of Flash through the mobile Safari browser and generally speaking everyone has adapted and found work arounds or changed their sites accordingly as to not require Flash for certain things.

On my personal blog about music, one of the most used plugins I have installed is the 1 Pixel Out flash MP3 player. And by the number of downloads and searches I’ve seen it’s one of the most popular ways to quickly play an mp3 inline to a blog post. It’s customizable, looks great and most of all it works perfect! That is until you try to view the post from your iPhone.

The Solution

So I hacked around the plugin and created the following patch that will detect if your viewer is using an iPhone, and if so it will serve the MP3 with a clickable “Play” image. This allows your viewer to play the mp3 straight through the iPhone! Your viewers will no longer get the no-flash error but instead get this:

Installation [version 2.0.4.1]

Just download this zip and go to your plugins folder for Wordpress. Replace your audio-player.php file with the one provided and put the iphone_play.png image in the assets folder. That’s it!

Download

Please note that this is based on version 2.0.4.1. The older version I have ported are listed below.Also, I haven’t tested all the different methods so you may see an issue here or there. Just hit me up if you have a problem and I’ll try to fix it. I’m hoping that 1 Pixel Out will integrate this into the release officially at some point. BTW, The user agent detection function was borrowed from WPtouch.

For you folks that want to manually do it or see what has been changed just have a look below. In the audio-player.php file you will need to make the following changes:

Add the following to line 320:

		/**
		 * Detects if the user agent is an iPhone or iPod
		 * returns true or false
		 */
		function detectAppleMobile($query = '') {
			$container = $_SERVER['HTTP_USER_AGENT'];
				$useragents = array(
				"iphone",  				 // Apple iPhone
				"ipod", 					 // Apple iPod touch
				"aspen", 				 // iPhone simulator
				"incognito", 			 // Other iPhone browser
				"webmate" 			 // Other iPhone browser
			);
			$applemobile = false;
			foreach ( $useragents as $useragent ) {
				if ( eregi( $useragent, $container ) || file_exists($devfile) ) {
					$applemobile = true;
				}
			}

			return $applemobile;
		}

after inserting that code around line 562 you will see:

			} else {
				// Not in a feed so return player widget
				$playerElementID = "audioplayer_" . ++$this->playerID;
				if (strlen($this->options["flashAlternate"]) > 0) {
					$playerCode = str_replace(array("%playerID%", "%downloadURL%"), array($playerElementID, $actualFile), $this->options["flashAlternate"]);
				} else {
					$playerCode = '<p class="audioplayer_container"><span style="display:block;padding:5px;border:1px solid #dddddd;background:#f8f8f8" id="' . $playerElementID . '">' . sprintf(__('Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version <a href="%s" title="Download Adobe Flash Player">here</a>. You also need to have JavaScript enabled in your browser.', $this->textDomain), 'http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash&amp;promoid=BIOW') . '</span></p>';
				}

				$this->footerCode .= 'AudioPlayer.embed("' . $playerElementID . '", ' . $this->php2js($playerOptions) . ');';
				$this->footerCode .= "\n";

				return $playerCode;
			}

which needs to be replaced with:

			} else {
				if($this->detectAppleMobile()){
					$iphone_player = '';

					foreach ( explode( ",", $source) as $afilename ) {
						$afilename = trim($afilename);
						$iphone_player .= '<a href="'.$afilename.'"><img src = "'.WP_CONTENT_URL.'/plugins/audio-player/assets/iphone_play.png"></a><br />';
					}
					return $iphone_player;
				} else {
					// Not in a feed so return player widget
					$playerElementID = "audioplayer_" . ++$this->playerID;
					if (strlen($this->options["flashAlternate"]) > 0) {
						$playerCode = str_replace(array("%playerID%", "%downloadURL%"), array($playerElementID, $actualFile), $this->options["flashAlternate"]);
					} else {
						$playerCode = '<p class="audioplayer_container"><span style="display:block;padding:5px;border:1px solid #dddddd;background:#f8f8f8" id="' . $playerElementID . '">' . sprintf(__('Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version <a href="%s" title="Download Adobe Flash Player">here</a>. You also need to have JavaScript enabled in your browser.', $this->textDomain), 'http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash&amp;promoid=BIOW') . '</span></p>';
					}

					$this->footerCode .= 'AudioPlayer.embed("' . $playerElementID . '", ' . $this->php2js($playerOptions) . ');';
					$this->footerCode .= "\n";

					return $playerCode;
				}
			}

Installation [version 2.0 beta 6]

Just download this zip and go to your plugins folder for Wordpress. Replace your audio-player.php file with the one provided and put the iphone_play.png image in the assets folder.

Download

Note: I removed the old 2.0 beta 6 manual code to avoid confusion