Podcast
Features
Comments
October 26th, 2011 | by Barrett Golding | tags: WordPress
Transom uses the WordPress Audio Player plugin, which, since it’s fashioned from Flash, is invisible to the iPhone/Pad/Pod-Touch. But Safari in all Apple’s iOSes is HTML5 <audio> aware, and supports MP3 play. So here’s our quick & filthy fix…
Open the file: /plugins/audio-player/audio-player.php.
Find the: function getPlayer().
Within that function, find the variable: $playerCode.
And insert this PHP/HTML (the $source var holds the URL of the MP3):
'<audio src="' . $source . '" controls>Flash stuff...</audio>'
So, where the original read:
$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>';
It now says (we shortened the no-Flash text too):
$playerCode = '<p class="audioplayer_container"><span style="display:block;padding:5px;border:1px solid #dddddd;background:#f8f8f8" id="' . $playerElementID . '"><em>' . sprintf(__('<audio src="' . $source . '" controls><br />Audio player needs Flash9+ (<a href="%s" title="Download Adobe Flash Player">download</a>) and JavaScript.', $this->textDomain), 'http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash&promoid=BIOW') . '</audio></em></span></p>';
‘Course, this is not a great way to do it:
- It needs redoing after every upgrade of this plugin.
- We should really should check first to see:
- Does browser supports the HTML5 audio tag? (IE8: no.)
- If so, will it play an mp3? (Firefox & Opera: no; Safari & Chrome: yes.)
- Then, according to above conditions, the script should:
- If yes to both, write only the HTML5 audio tag (w/ src), not the Flash stuff.
- If no to either, write only the Flash stuff, not the HTML5. (More info and scripts at HTML 5 Doctor.)
But at least now iPhoney/iFad folk can hear us.
Thanks for the tip. If it seems daunting to anyone else in the Transom audience, we’ve taken a less technical approach to making our WordPress audio available to iOS users. After the WP plugin tag, we include a direct link to the mp3 source file. The HTML looks like this:
[audio http://blog.files.wordpress.com/2012/01/story.mp3 [mp3 - 0.7 MB - 0:58]It ends up looking almost official, and iPhone users can click on the link “mp3″:
(audio player here)
[mp3 - 0.7 MB - 0:58]
Brian, that’s a good solution, tho requiring a little more labor. it let’s iOS folk hear the mp3, tho the player will launch in a new webpage; and to return to your original page, the user needs to use the browser’s back-button.
I do something similar in my “Newspaper Heroes on the Air” blog about old time radio. It’s hosted at WordPress.com, which offers that simple [audio http//blah.blah.blah/filename.mp3] approach to launch the Flash-based player.
I put such a link early in each blog post, but also put a standard HTML link to the file nearby, around the program episode name, with a Tooltip “title” tag that says clicking the name will download the MP3 or play it (depending on your platform and browser).
Example: http://jheroes.com/2012/02/04/wasp-and-hornet-journalistic-vigilantes/
Buying and taking that plugin and integrating it into WP is really good for beginers . I would just like to share with everyone tat html5 player were really works well.