音源を組み込む

Drupalで音源を組み込む時にjplayerというモジュールを使っています。インストール数は多くないものの、音源関係のモジュールはそう多くないので、たぶんこれが一番一般的なのではないかと思います。

Drupalモジュールの他にlibrariesディレクトリにjPlayer本体をアップロードしておく必要があります。

jplayer

こんな感じになります。このままでスマホの縦方向だとプレーヤーがはみ出てしまうので、cssで調整しています。もっとプレーヤーのスキンを変えてみたいところですが、cssだけじゃなくて、ボタン類の絵を描かなきゃならないので、とりあえず、そのままです。

音源の再生はOSやブラウザによってかなり異なるのですが、調べた範囲で概ね問題なさそうです。


かつてはFlash Playerでの再生が普及していたのですが、iOSがFlashに対応しないので、現状は基本はJavascriptベースになりそうですが、もっと簡単な方法があります。HTML5のaudioタグの利用です。該当するコンテンツタイプにファイルフィールドを設置(例えばfield-audio)を設置して、下記のようなfield--field-audio.tpl.phpで出力テンプレートをオーバーライドします。

<div class="field-name-field-audio">
<?php foreach ($items as $delta => $item): ?>
<audio controls><source src="<?php print render($item); ?>"></audio>
<?php endforeach; ?>
</div>

audio tag

これだけでこんな出力ができます。ところがこのaudioタグの出力、OSやブラウザによって千差万別になってしまいます。

どのブラウザでも一応再生できるのですが、笑っちゃうぐらい違ってます。iOSではブラウザではなくOSが制御していて音量調節や再生位置の出力もなく再生ボタン(再生するとポーズボタンに変わる)だけです。それこそW3Cでまとめてもらいたいものですが、現状では、これを統一したりカスタマイズするにはやはりJavascriptしかなく、上述のjPlayerもそのひとつと言えそうです。

※追記:このaudioタグだけの方法、音声ブラウザでは全く認識しないことが分かりました。オススメできない方法です。


音源を扱うに当たってもうひとつ大きな課題は著作権の保護です。jPlayerで音源をダウンロードできないようする設定はあるのですが、それでもソースを見られたらバレバレです。

ちょっと前、ポッドキャストっていうのが、結構盛り上がっていたことがありますが、これはシステム的なものではなく、RSSを活用した音源配信のウェブサービスの名称のようで、特段著作権保護とかは前提にはなっていないようです。

やはり、本格的に音源配信をするとすればストリーミング配信ということになりそうです。動画か音源かに関わらずストリーミングサーバーを設置する必要があります。たぶんVPSでもできそうですが、サーバーのアプリケーションとしてはAdobe Media Serverがデファクトスタンダードになっているそうですが、10万円以上します。オープンソースもあるようですが、使いこなすには、かなり勉強が必要になりそうです。

となるとストリーミングのウェブサービス活用が正解かも知れません。YouTubeは音源だけだとアップロードできません。動画ではなく音源ストリーミングのウェブサービスってありそうで、意外と見つかりません。

ということで、とりあえず結論です。よりシビアな著作権保護を行う場合には、音源に静止画を組み込んで、YouTubeにアップロードするのが一番安上がり、かつカンタンということです。

こんな感じです。