iPhone, 1 Pixel Out Audio Player and HTML5 – The Prequel

Lots of response to my original article about HTML5 and the 1 Pixel Out Audio Player. Unfortunately, most of it was because the original code and links died. I was able to get in touch with the author and he was kind enough to send all his files for me to repost and host here. Below is Ryan’s original article (with a couple minor edits requested):

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.

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:

ETA: added ipad as a user agent as per MartyW’s comment below (not in zip file).

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
				"ipad", 					 // Apple iPad
				"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&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&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

Now head on back to my update post to see how to take this one step further and get HTML5 into the mix. – David

9 Comments

• 
  MartyW September 15, 2011 at 7:44 am

  Awesome! Thanks for adding this, it works perfectly. One other minor addition: the ‘ipad’ user agent string can also be added to the $useragents array.

  Reply
• 
  Deji November 18, 2011 at 3:47 pm

  Great article, works perfectly for me also. Happy Coding!

  Reply
• 
  Brian February 10, 2012 at 9:56 am

  Thanks for this. It works perfect on my iPhone, but I’m having trouble setting it up for the iPad. I pasted the code above into the audio-player.php file, but it’s saying there is a syntax error when I do so. Also is it replacing the similar looking code starting on line 320 or just being pasted above? Thanks for your assistance!

  Reply
  • 
    David February 10, 2012 at 10:05 am

    Brian, Just above the code in the article I mentioned adding the ipad user agent as per MartyW’s comment but it’s not in the zip file, did you add that?

    It also looks like the code display on the blog here was a little messed, the & quot; can be replaced with “

    Reply
    • 
      Brian February 10, 2012 at 12:48 pm

      Thanks for your quick reply! I’m a bit confused by the way the instructions regarding the iPad are worded on this page.

      No, I didn’t add the “ipad” user agent to the $useragents array that Marty mentioned. Is that all there is to it? What I did was paste the code above into the audio-player.php file that you already modified for the iPhone.

      Sorry, I’m not a coder so you will need to be very specific.

      Thanks again!

      Reply
      • 
        David February 10, 2012 at 5:45 pm

        I’ve sent you an email with the updated audio-player.php file.

        Reply
• 
  Brian February 10, 2012 at 8:29 pm

  It worked like charm! Thank you for your help!

  Reply
• 
  chris atkins March 23, 2012 at 8:07 am

  Please may you send me the ipad audio-player.php fix, i am also having the same problem as Brian

  — i also found this fix to make sure the player plays within the page – $iphone_player .= ‘Your browser does not support the html5 audio element.’;

  Cheers

  Reply
  • 
    David March 23, 2012 at 11:01 am

    Email sent. Please update me on how it works out.

    Reply