wordpressのプラグイン「Audio Player 」をiPhoneではHTML5で動作させる

iPhoneではFlash動作のプラグインは使えない

WordPressでmp3などを再生するプラグインで最も手軽に導入できるプラグインとして「Audio Player」が有名です。
これは投稿記事にアップロードしたmp3ファイルをFlashで読み込んで再生するプラグインで、意図しないプレイヤーで再生することを防いでいます。またダウンロードすることもないので閲覧者のキャッシュにたまっていくこともおそらくないと思います。

しかし、Flashで再生するこのプラグインではiPhoneでの表示ではうまく再生することが不可能です。(※iPhoneでの表示は「WPtouch」を利用します。)

そこでいろいろと情報を探したのですが、日本語サイトでは良い情報はみつかりませんでした。
海外のサイトで「Audio Player」プラグインのカスタマイズについて書かれた記事があったのでとりあえず導入したところ、iPhoneではHTML5でプレイヤーを起動させてそこにmp3ファイルを読み込ませることに成功しました。

Audio Playerで再生

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.

html5で再生(IEの方はIE9以上のバージョンでしか表示されません)

以下のサイトがその記事です。
http://pastebin.com/BnA5PySR

編集するファイルは下記になります。

wp-content/plugins/audio-player/audio-player.php
の545行目あたり

編集する内容

$playerCode = '<p><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&amp;promoid=BIOW') . '</span></p>';

上記の箇所を「//」でコメントアウトします。

以下の記述に置き換えます。

//replace
$playerCode = '<p><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&amp;promoid=BIOW') . '</span></p>';
//with
$playerCode = '<p><span style="" id="' . $playerElementID . '">';
$playerCode .= '<audio src="' . $actualFile . '" controls preload="none">';
$playerCode .= '<a href="' . $actualFile . '">Download</a>';
$playerCode .= '</audio>';
$playerCode .= '</span></p>';

カスタマイズ前は下記のようにflashプレイヤーがない旨が表示されます。

カスタマイズ後は下記のようにHTML5のプレイヤーが立ち上がり無事に再生することができました。

コメントを残す

メールアドレスが公開されることはありません。