連載第39回
2013年7月13日
WordPress:Audio PlayerをiOS(HTML5)で動作させる

 先日ブログ記事の編集中、サイドバーにプラグイン更新のアラートが出ていたのでちょっと見てみたら、当ブログで音楽の再生に使用している「Audio Player」プラグインの修正版がリリースされていました。現状特に不満もなく普段ももう全く気にしていない状態だったのですが、それゆえに何気なく「アップデート」のボタンを押したら、するするとインストールが終わり、気が付けばiOS機器で音源の再生が出来なくなっていたのでした…(←)。そうでした、このプラグイン、基本動作はFlashベースで行われるよう設計されているのです。なのでMacでは問題ないけれど、Flashのインストールなど端っから考慮されていないiOS機器では妙なアラートが表示されてしまい、まるで音源が試聴出来ないという事態に陥ってしまうのでした。すっかり忘れてた。
 しばらくそのダメになったiPadの画面をぼんやり眺めながら「はて、以前はどうやって回避してたんだっけ?」といういつもの痴呆っぷりを発揮しつつ、そうそう、プラグインのPHPコードの一部に修正を入れたんだと思い出すのに約30秒。しかし当然ながらその内容なぞまるで覚えちゃいません。メモすら取っていませんでした。
 そこでまたいつものようにネットでググって大量にサジェストされる記事の中から記憶を喚起させてくれたものをチョイスして参考にしつつ、今回も備忘録として記事にしてしまいます。基本、コピペですけど。

該当部分を差し替えるだけの簡単な…

 まずはサーバーにインストールしたAudio Playerプラグインから「audio-player.php(wp-content>plugins>audio-player内)」をローカルにダウンロードしてエディタで開きます。今回はMac用エディタとしては定番である「mi」を使用。開いたコードの中から下記の部分を探し出すのですが、今回アップデートしたAudio Playerバージョン 2.0.4.6 では559行目にそれはありました。


$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>';

 「mi」で開いている状態でのキャプチャを参考までに(↓)。青色の枠線で囲った部分を差し替えます。

 該当部分を見つけたら、次はその青色の枠線箇所を「//」でコメントアウトし、以下の記述に置き換えます。

//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>';

 差し替え後、「mi」で開いている状態でのキャプチャを参考までに(↓)。

 修正したファイルを保存し、サーバーの元にあった場所へ上書きアップロードします。そしてiPadで所定のページにアクセスしてみると、このように無事、再生ボタンが表示されました(↓)。Flashプラグインをスルーして、iOS機器ブラウザ標準のHTML5プレーヤーでmp3ファイルを開いているワケで、タイトルのように「Audio PlayerをiOS(HTML5)で動作させる」という言葉のニュアンスは厳密には間違っていると思うのですが、まあ、結果オーライで。個人的にはAudio Playerが現状のままFlashを捨ててHTML5ベースにアップデートするか、あるいは代替プラグインの登場を待つか、さらにはiOSの再生機能がもう少し使い勝手の良いものになってくれたら…とは思うのだけれど。

まあしかし、iPadなどで再生出来なくても誰も困らないというか、とりあえず自分一人が困っていただけなのだけれど、それよりも「音楽とか」を早く再開させろよ、と言いますか…。