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

iPhone, 1 Pixel Out Audio Player and HTML5

Apr 13, 2011   //   by David   //   Blog, Coding  //  13 Comments

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.

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

Download the 1 Pixel Out audio player at 1pixelout.net
Download Ryan’s fix at intereactive.net See his original article and code now on my site.
MP3 was created using Mixcraft by Acoustica

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

13 Comments

  • Your site is actually very informative. Thanks.

  • Wonderful … yours is the only fix I’ve found where the audio plays in both iPhones and Androids.
    I would be very grateful if you could send me (or point me to a link for) the updated 1 Pixel Out files.
    Also The same with Ryan’s fix … the link only leads to an email address.
    Cheers and thanks,
    Shiv

  • Sorry for the delay. I’ve actually gotten the files from Ryan but I have to clear out some client work before I can update the code here. I will look after it as soon as possible.

  • I too would love to obtain the ryan update. Thanx

  • Hi David,
    Thanks for posting this. Could you send me the fix? and breifly how to implement it.
    Bill

  • Hi, David, Can’t get this working on my Drupal site for some reason. I downloaded the audio-player.php file from the Prequel article and replaced my original file with that; then I added the fix above so that it would play inline with HTML5-savvy mobile devices, but when I navigate to the page, it’s blank where the player should be. See http://creativemeasures.com/song/all-i-know to test. When I navigate to this (your) page, the inline player appears and works fine. Do you know if there’ss some Drupal-specific reason your fix won’t work for me? Thanks for any help you can offer!

    • Doug, I sent you an email with some ideas. Not sure how much it will help but might give you a place to start looking.

      • David, Thanks for the suggestions. Your first one was to just try including an tag like the one below, and see if that worked.

        Your browser does not support the html5 audio element.

        After trying several “fallback” options (that would include the HTML5 option only if the browser supported it), none of which worked, I decided to just include the HTML5 audio tag _in addition to_ the Flash-based player, and _without_ the “Your browser does not support…” content, because since both players are being included, browsers that don’t support the HTML5 option should support the Flash-based one. This works on my iPhone 4s: the HTML5 player shows up, but not the Flash-based one. In Safari on my laptop, both players show up, so I included a title attribute on the Flash object tag (title=”Flash-based audio player”) and one on the audio tag (title=”HTML5 audio player”) so users will know what the options are. Am hoping it works on iPads, too, but don’t have one, so will have to ask a friend to test that.

        Also, a couple Drupal development notes: I changed the page template to have a plain-old tag rather than the XHTML 1.0 Strict one that was being used, so the pages would allow HTML5 tags. I also had to empty the cache while I was adjusting the templates to get them to load (/admin/settings/performance page, Clear cached data button at the bottom).

        Though this is not the most elegant solution, it’s the only one I could get working, and it does the trick. Thanks for the help!

        • Sorry an elegant solution didn’t work, but I’m glad you’ve been able to add the html5 support on your Drupal site.

  • This does not seem to work on an iPad2 running iOS5. I just visited your site and I got the audio clip message. Any ideas on a fix?

    • Not sure, the ‘ipad2’ user agent string is the same as the ipad so I don’t think it’s the $useragents array. I’ll give it a try a little later.

  • [...] looks like I’ll need to put a little bit of time in to see if I can get the previous solution to work with this new [...]

Leave a comment