IE9+対応の埋込み型音楽プレイヤーはaudio.jsが無難だと思った
個人で少しずつメンテナンスをしている「岡崎マンドリンアンサンブル」のリニューアルを先日行いました。
このサイトには試聴コンテンツがあるので、埋込み型の音楽プレイヤーの選定を行いました。 備忘録も兼ねてその記録を残しておこうと思います。
要件
- IE9+、Firefox最新版、iOS Safariの環境で使用が可能なこと
- mp3ファイルが再生可能なこと
- スタイルの自由度が高いこと（なるべく画像を使っていないこと）
- プレイリスト機能があること
候補
候補を1個あたり、1−2時間ほど試してみました。
jPlayer
設置の仕方が悪かったのか、プレイリスト部分がChrome以外で動作しなかったので導入を見送りました。 標準のサンプルで画像パーツが多く使用されていたのもあって色替えがやり辛い印象がありました。
MediaElement.js
動作自体はIEでも動作しており問題なさそうでした。
ただ、サンプルのコーディングにpositionが多様されており、 他のコーディングと競合したため導入を見送りました。
audio.js
MediaElement.jsで今ひとつ好きになれなかったコーディングもシンプルで サンプルの段階で分かりやすく好印象でした。
audio.jsの唯一の欠点はcssが一部jsに組み込まれていることです。
（JS実行時にヘッダーにstyleタグが追加されます）
cssの記述としてはインラインほど強くはないので、 自前のcssで容易に上書きをすることは可能です。
おわりに
動画はYoutubeにアップロードしてプレイヤーを埋め込むことが 一般化してきているのに対して、音楽をサイトに埋め込むときの 選択肢が少なくてわりと困りました。
有名どころとしてはSoundCloudがありますが、まだ国内では認知度も そこまで高くないので実際のクライアントワークでは提案はしにくいのが現状だと思います。
音楽一曲だけの再生であればaudioタグ単品での実装も十分にいけそうですが、 プレイリストが必要、レガシーブラウザへのフォールバックが必要、といった ケースではしばらくこのようなjsのお世話になりそうです。
同じようなことで悩まれている方の参考になれば幸いです。