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

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

Sep 14, 2011   //   by David   //   Blog, Coding  //  14 Comments

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

14 Comments

  • 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.

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

  • 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!

    • 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 “

      • 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!

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

  • It worked like charm! Thank you for your help!

  • 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

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

  • Hi!
    Thank you for this post!
    Can you make this fix for the Joomla 1px out audio player plugin?

    We have over 2000 links to the mp3 files, and need to replace flash version of this player.

    • You could mod this for Joomla but with most new browsers supporting html5 audio it might be better to start with that as the default and only have the one pixel out flash player as a fallback.

  • I have a mate who is a proper Mac fanboy,even though he’s over 50, so perhaps we should call him a Mac Fanan, anyway I am developing my lovely blog and send it to him pre-launch to have a look at. So waddaya know, my first comment on my virgin blog were about the audio player not working, and he went on and out about it.
    Your fix was painless and effective which is how I like my fixes, so thanks a million and well done.
    Site still not quite there but it’s not far off.

  • Just found this but haven’t tried it yet since I’m out travelling and surfing on my iPhone.

  • Have anyone looked into adding a fallback to html5 for those devices that doesnt support flash?

Leave a comment