Update September 2011: Looks like blueprint is offline so I contacted Ryan and he was gracious enough to provide his source files. See his original article and code now on my site.
Ryan over at intereactive.net posted an excellent fix way back in late 2009 for the 1 Pixel Out Audio Player (ETA: now on my blog since intereactive is gone). The player is widely used as a standalone item and as a WordPress plugin. The problem is that being Flash-based it isn’t supported on iDevices — iPhone, iPad, iPod — so Ryan came up with the fix. His solution detects if an iDevice is accessing the page then replaces the Flash player with an icon linking to the audio file.
This is great but I needed to go one step further and provide a similar user experience by playing the audio in page instead of linking out. Enter html5 and the audio tag.
In the updated audio-player.php at around line 568 the html is generated for the new icon which links the audio file
$iphone_player .= '<a href="'.$afilename.'"><img src = "'.WP_CONTENT_URL.'/plugins/audio-player/assets/iphone_play.png"></a><br />';
which can be replaced by
$iphone_player .= '<audio src="'.$afilename.'" controls="controls">Your browser does not support the html5 audio element.</audio><br />';
to create an on page html5 audio player for iDevices.
Simple audio player using 1 Pixel Out Flash player and fix for iDevice non-flash browser support using html5 audio tag. Try it out by visiting this page using your iPhone, iPod or iPad and see what appears here.
UPDATE: Here is the latest and greatest audio-player.php file with iPad edit included that is currently being used on this page. Download (zip, 9Kb)
If you want to check out this page on your iPhone, just scan the following QR Code
Leave a comment
iOS Tips and Tricks