埋め込みオーディオ・プレーヤーの変更

Plug-in, Tips, Wordpress


201011141300初めて自分のサイトを開設したのは1998年。当時はまだモデム通信でのインターネット接続だった。
1.5MのADSLに加入したのが2003年。その年の10月に自分で録音した音楽作品の公開を始めた。
インターネット上で自分のコンテンツを持ち始めたのは日記や論文が書きたかったからじゃなくて、そもそもこれがやりたかったからなのだ。
ナローバンドの頃からRealPlayer等を試していたがファイルサイズの制約で昔のトランジスタラジオみたいな音にしかならない。ブロードバンドが普及し始めて、ようやくmp3フォーマットの配信ができる環境が整い始めた。そんな時代だった。

Quicktimeという選択

今日に至るまでの期間、CMSは
html直接記述→wiki→joomla→Movabletype→Wordpress(いまここ)
と遷移。
CMSは変わっても音楽データの配信は最初からずっとQuicktimeに頼ってきた。自分がMacユーザーだということもあるが、開設当時としてはこれが最も汎用的な方法に思えたからだ。
IEとそれ以外で埋め込み方法が異なる。両対応のコードはこんな感じ。

しかしこれはページを訪問してくれた人にQuicktimeのインストールを強制することになるためできれば取りたくない手法だ。

html5

で、「良くない手法」であることは重々承知していながらもずーっと放置してきてしまったわけだが、ブラウザの種類が増え、スマートフォンやタブレットがPCに取って代わろうとしている昨今になってようやく「やっぱこのままじゃマズいな」という気分になってきた。

ふと見渡せば世間ではhtml5へ移行が進みつつある。そしてそこにはオーディオファイル埋め込みのための<audio>というタグが存在してるってのを遅ればせながら知ることになる。

そうか。もうそういう時代なんだ。
このままレガシーなものを放置しとくわけにもいかないな。

というわけで、このタグをベースに幾つかの方法を試してみた。

【html5をそのまま使う】

なにせ「タグ」なのでこれを使うだけならすごく簡単だ。書き込むコードは

これだけで埋め込まれる。html5に対応していないブラウザで開くと<audio>~</audio>の間に書かれた文字列が表示されるので、

と書いておけば体裁は整う。
オプションとして

  • preload (値auto、metadata、none):データをあらかじめ読み込む
  • autoplay:自動再生する
  • loop:繰り返し再生する
  • controls:コントローラーを表示する

がある。自分のサイトでは自動再生かつループ、コントローラーも表示したかったので

とした。

Google Chrome、Safari、Opera、そしてスマートフォン系はこれでいいのだが、これだけだとIE8以前とFire Foxでは「非対応」になってしまう。(→Fire Foxは3.6以降でhtml5に対応しているのだがaudioタグでsrc指定できるのはwavとoggだけで、mp3は開いてくれないのだ)

IEとFire Foxでは非対応なんていくらなんでも酷すぎる。

しかしこれには解決法がちゃんとあった。
ヘッダー内に

を追加する。これだけで非対応ブラウザでもaudioタグが機能してくれるようになるという、まさに「魔法の呪文」だ。

あとはコンロトールバーの幅を調整したい。ところが<audio>タグには幅を定義する属性が用意されておらず、280px程のものが表示される。
これを調整するにはcssを利用する。例えば幅を600pxにしたい場合は

をcssに追加すればよい。

というところまではすんなり来た。

【Chromeがダメ】

基本仕様だけならこれにて一件落着である。特殊なアプリケーションを追加でインストールせずに、全ての環境で音楽ファイルが再生できる。なんの問題も無い…

としたいところなのだが、

このプレーヤーの「コントロールバー」が気になった。

<autio>で記述するとプレーヤーのコントロールバーは各々のブラウザが用意してるデザインで表示される。
SafariやiOSはQuicktimeライク、
IE、FFでhtml5media.min.jsが書き出しているプレーヤーも黒ベースでなかなか良い。
Operaも悪くない。
しかしGoogle Chromeのコントロールバーがどうしても許せないのだ。

html5audio_bar

なんだってこんなのっぺりしたものを…

で、次はこれをなんとかしたいという衝動に駆られたのだった。

【audio.jsを試す→不採用】

かなり良かった。
iphoneで表示した時に小さくてちょっと操作しにくい点を除けば、とても良かった。
html5とflashの切り替えもちゃんとできてて、とても良かった。

ただ…オプション関係の記述がちょっと冗長で自分的にはやや複雑に思えたので、他をあたることにした。

【jwplayer.jsを試す→不採用】

スキンや共有オプションが充実していてカスタマイズ性の非常に高いプレーヤー。
こういうのとっても好みなので「おおおお!」と思って入れてみたのだが、iOSで開いた時のコントロールバーがあまりにお粗末でがっかり。なんかのバグなんじゃないかという気がする。

試したのはver.5.8。現在はさらにバージョンアップしてるようなのでこの問題は解消されてるかもしれない。

【MediaElement.jsを試す→採用!】

jwplayerのようにスキンを選択したり共有オプションを追加したりすることはできないプレーヤーだが、換言すればシンプルでミニマルな感じ。
これはこれで好感が持てる。
しかもオプションの記述が比較的簡単なのも気に入った。

WordPressのプラグインにMediaElement.js – HTML5 Audio and Videoがあったので必要なライブラリの用意とヘッダー要素の書き出しのためにインストール。

プラグインが用意しているショートコードは使わず、single.phpに

を挿入。オプション関連は後半の”jQuery(document).ready(function($) {“に記載する。
これでブラウザ間の差異が無く、そこそこ見映えのいいプレーヤーが実装できた。

とりあえずMediaElement.jsでいってみる!が…

紆余曲折の末たどり着いたこのスクリプト。かなり満足してるのでしばらくはこれ使おうと思ってる。
しかし…できればシンプルな<audio>タグだけというのが美しいし、一刻も早くそうしたいところだ。

Chromeのあのデザインさえ何とかなれば…。
Google先生。是非よろしゅうたのんますよ。( ̄人 ̄)

ホントニ。