過去数年に渡り、何度も何度も繰り返してきた「音楽制作日記的なもの」がその都度挫折してきたのは、ブラウザで気軽に音声ファイルを再生できる環境が整えられなかったからだと、自分では勝手に思い込んでいます（そんな単純な理由かよ？）。先日掲載した「第９０回：WordPress 3.9 のPlaylist（プレイリスト）が表示されない」で残念ながら利用することが出来無かったWordPressの標準搭載するメディア・プレーヤー機能。引っ越し先のflfl.meでは「ヤル気」に関わるとても重要な事案なので、いくらお気楽な僕でも本件だけはそのままやり過ごすことは出来ません。引っ越しに長い時間をかけてきたのに、ここで同じ轍は踏みたくない。

ブラウザ標準搭載のプレーヤー

　単純に音声ファイルを再生したいだけなのに、なぜWordPressではこんなにハードルが高いのか。いろんなプラグインを探し回ったり（プラグインを使ってもうまくレイアウトや再生が出来無かったりする）、簡易なプレーヤーを自作すればいいんじゃないか？とか余計に複雑な方向へ向かったりしたのだけれど、珈琲ブレイク中にふと気付きました。

デフォルトのAudioプレーヤーを使えばいいじゃないか。

　一体何をわざわざ小難しく考えていたのか、ブラウザが標準で搭載しているメディア・プレーヤー機能をそのまま使えば良いではないか。もちろんプラグインのように便利な機能は無いし、何の装飾も無くて見た目にもあっさりし過ぎているけれど、単純に音声ファイルを再生するだけなら何ら問題ありません。プラグインを追加インストールする必要も無いから、動作の安定を維持する為にもイイ。

CSSで模倣してみた

　そこでまずmp3をページに＜audio＞タグで配置した後、その周囲をWordPressのプレイリストの外観（上）を真似しつつ、CSSでデコレーションしてみました（下）。単に＜audio＞タグで表示されるバーをそのままにしておくよりは、ジャケ画像との関連付けも出来て、パッと見の印象はイイかも。

　次にiPod touch（iPhone）のiOS7で表示させた場合のデコレーション。実は今回、初めてiOS7のSafari標準オーディオ・プレイヤーを見たわけですが、シンプルで良いですね。

　次はiPadで見た場合。上のiPod touch（iOS7）とプログレス・バーのデザインが違うのは、たぶん手持ちのiPadのOSバージョンが6.1.3のままで、iOS7にアップデートしてないからだと思います（とりあえずiPad 2は検証用のため、今後もアップデートしない予定）。最新版のSafariではどう表示されるのか実機で確認したいところですが、生憎余分のiPadは持ってません。

<div id="demo_sample">
<div id="sample_info">
<img class="alignleft size-full wp-image-80" src="ジャケ画像へのパス" />
<strong>"Night Head ― demo 1996 ―"</strong>
<i>Night Head ― demo version ―</i>
<em>flfl.me</em></div>
<div id="playbar"><audio src="音声ファイルへのパス" controls="controls"></audio></div>
</div>

ーーーー　↓　2014.10.31更新（iPhone・iPad用は未作成）　↓　ーーーー

<div class="demo_sample">
<img class="alignleft size-full wp-image-80" src="ジャケ画像へのパス"  />
<strong>"Night Head ― demo 1996 ―"</strong>
<i>Night Head ― demo version ―</i>
<em>flfl.me</em>
<audio src="音声ファイルへのパス" controls="controls"></audio>
</div>

ひとまず、満足

　確かにこの初心者的な方法だと、毎回音声ファイルを埋め込む度にチマチマとHTMLタグを打つのが面倒だし、WordPress標準機能のような、複数の曲を同時にリスト表示させることも出来ません。そういう点で、WordPressのプレイリスト機能はすごく便利で、ショートコードを一旦作成してしまえば、その１行をブログ内の任意の場所にコピペするだけでプレーヤーを配置出来るし、何度でも使い回し出来る。それがオリジナルFLFLテーマでも使えたらとても嬉しかったのですが、まあ今回の処置は長所短所も含め、現時点での最適解かなと思います。

　ただし、手持ちの機材＆ソフトウェアでしか検証していないというのは、昔から相変わらず。Safari以外のブラウザでどうなるのか？とか、Windowsマシンでの表示はどうなっているのか？なんて、潔いくらいに全く興味が無い。そんなことどうでもいい。

　さて、以前リストアップした課題も少しずつ解消（？）して、残すはフッターの取りまとめという、今となってはもうどうでもイイことを残すのみとなりました。つづく。

　●仮ロゴのジャギー原因解明の為にSVG画像に置き換えてテストしたい。
　●というか、仮ロゴ自体のデザインをどうにかしたい。
　●＜footer＞エリアの項目には自己紹介以外に何が必要か。
　●タグを導入したい。
　●WordPressのダッシュボードが外部と接続出来無い。

サーバー引っ越しシリーズの第２シーズンは、なんとか第１００回以内に終了しそうです。

2014-08-09 ＞ VPS＆WordPress引っ越しメモ