いろいろ見たけど、埋め込みmp3プレイヤーは「audio.js」がおすすめ! 対応ブラウザ多し、デザイン良し、設置は簡単!
2015年10月07日

いろいろ見たけど、埋め込みmp3プレイヤーは「audio.js」がおすすめ! 対応ブラウザ多し、デザイン良し、設置は簡単!

効果音素材配布に適したmp3プレイヤーとは


フリー素材コーナーをRe:I本館から移転するにあたって、ブログにブラウザ上で音声ファイルを再生できるmp3プレイヤーを埋め込めるようにしようと思いました。

実は、Seesaaブログには、初めから独自のmp3プレイヤーが搭載されています。
これです↓

※2016.08.20 追記
8/17にSeesaaブログが独自のプレイヤーを廃止したので、現在はここに書いているプレイヤーは表示されていません。
この記事の本題には関係ないので気にしないでください。

これも音楽発表用としては素晴らしいプレイヤーなのですが、効果音素材の「試聴プレイヤー」としては、ちょっと立派すぎるんですよね。
DLボタンの仕様も、音楽発表用には最適なのですが、素材配布用には使えないんです。クリックするといちいちSeesaaブログ側で用意している注意事項のページに飛ぶので……。


そのため、無料で使える埋め込み式mp3プレイヤーをネットの海から探しました。
求める条件は「再生ボタン1つの状態にできる」ということでした。
たくさんの効果音をずらっと並べて、再生ボタンの横に説明文を載せることを考えると、クリックした時に折りたたまれていた再生バーがぴろっと横に伸びるようなこともなく、ボタン1つで完結するものが最適です。

かと言って小さすぎてもクリックしにくいので困ります。
探してみると、意外とちょうどいいサイズが見つかりません。サイズくらいカスタマイズすればいいのでしょうが、それにはそれなりの知識が必要ですからね^^;

結果、Flash式のmp3プレイヤーの中では、「MP3 player」というプレイヤーが一番でした。(本当に「MP3 player」という名前のmp3プレイヤーなんです)

小さくするにはちょっとカスタマイズが必要ですが、objectタグ内のwidthを25pxにするだけなのでそんなに難しくありません。
サンプルを公開してくださっている方もいらっしゃいます。(再生ボタンだけにするのは載ってないですが)

フラッシュMP3プレーヤーをブログなどに埋め込む方法(2)
http://urbanqee.com/webutil/sound/mp3player_neolao.html

ただ、埋め込み用タグが長くて、たくさん並べると編集画面が見にくいな〜とは思っていました。
ですが、それ以上の問題があったのです。


Google Chromeは9/1からFlashコンテンツが自動再生されなくなった


いざ、ブログに「MP3 player」を埋め込んでみると……





※Google Chrome ブラウザ以外のブラウザでご覧の方には問題なく見えると思います。もしChromeをお持ちでしたら、Chromeで見てみてください。

※2016.08.20 追記
現在のバージョンのChromeでは、下記のようなことにはならず、普通の再生ボタンが表示されています。

Google ChromeでFlashコンテンツが埋め込んであるページを閲覧すると、コンテンツ全体が暗くなり、真ん中に再生ボタンが出てきます。
これは、mp3プレイヤーの再生ボタンではなく、「Flashコンテンツ」自体を再生するためのボタンです。
なので、音声を聞こうと思ったら、Google Chrome側で出している再生ボタンを押してFlashコンテンツを再生し、Flashコンテンツ側で出している再生ボタンを押して音声を再生するという、ちょっと間抜けな二度手間になってしまうのです。

たくさん効果音の試聴プレイヤーを並べようと思ったら、そんなのたまらないですよね^^;

ちなみにFlashコンテンツの自動再生が無効にされたのは、公式な理由としては「省エネのため」とのことです。

参考:
ChromeブラウザでのFlashアニメ非自動再生は9月1日から - ITmedia ニュース
http://www.itmedia.co.jp/news/articles/1508/31/news054.html

じゃあどうしたらいいかというと、HTML5で音声を再生すればいいのです。


HTML5式のmp3プレイヤーで一番使いやすかったのは「audio.js」


今度はHTML5式のmp3プレイヤーを漁りました。
歴史が浅いからかFlash式ほどの数は見つかりませんでしたが、こちらも複数のプレイヤーがありました。

しかし、設置が難しかったり、(僕の力では)再生ボタンだけの表示にできなかったりして、なかなか運命のプレイヤーに出会えません。
配布サイトがことごとく英語なのも辛かったです(おいおい)。

そんな中、ようやく巡り合ったのが「audio.js」。

これは本当に素晴らしいmp3プレイヤーで、まず第一に設置が簡単です。

まず公式サイトからzipをダウンロードします。
これを右クリックで「展開」すると、いくつかファイルやフォルダがありますが、「audiojs」というフォルダの中に入っているものが、埋め込みに必要なファイルです。

「audiojs」フォルダの中には、「audio.js」「player-graphics.gif」「audiojs.swf」の3つのファイルが入っています。これを自分のサイトのファイルサーバにUPします。

次に、mp3プレイヤーを表示したいページのどこかに、次のHTMLを入れます。

<script src="アップロードした「audio.min.js」のURL"></script>
<script>
audiojs.events.ready(function() {
var as = audiojs.createAll();
});
</script>

これを入れる場所はhead内でもbody内でもOKです。(画面上には現れないので、本当に位置はどこでも大丈夫です)
僕はSeesaaブログの「コンテンツ」のページから、サイドバー部分に自由形式で入れておきました。

そして、mp3プレイヤーを表示したい場所(記事の中やサイドバーなど)に、次のように書きます。

<audio src="mp3ファイルのURL" preload="auto"></audio>

※preload="auto"は、ページの表示と同時に音声ファイルを読み込むということ。
preload="none"にすると、再生ボタンを押してから音声ファイルを読み込むようになる。音声の長さ、1ページに埋め込む数によって使い分けるといいと思います。

参考:
【JavaScript】HTMLで音楽ファイルを再生する【audio.js】 | Tips Note
http://www.tam-tam.co.jp/tipsnote/javascript/post3991.html

また、HTML5というのは新しいHTMLなので、古いブラウザだと対応していないのですが、audio.jsでは、HTML5非対応ブラウザの場合はFlash Playerで再生してくれるんです。ありがたいですね^^


audio.jsをカスタマイズ!(再生ボタン素材付き)


極めつけに素晴らしいのが、カスタマイズ性能です。
CSSで外観を細かく指定することができます。

デフォルトのままだと素材配布には立派すぎるので(公式サイト参照)、再生ボタンだけにしたいと思いました。

やり方を調べていたところ、素晴らしいページを発見!

オリジナルの音楽再生ボタン audio.js - webをつくる人になる
http://weble.hatenablog.jp/entry/2014/08/28/01

もうほとんどコピーさせていただきました。
ありがとうございますm(__)m

それでできあがったのがこちらです。
バーの動き方を比較するため、3種類の長さの音を用意しました。

短い効果音(ピッ)

1フレーズの効果音楽(ファンファーレ)

音楽

色やサイズはコピー元から変えていますので、これとまったく同じプレイヤーを自分のサイトに埋め込みたいという方は、次のCSSと画像をご利用ください。


▼ ボタン画像(右クリックで保存後、自分のサイトのファイルサーバにUPして使ってください)

再生ボタン
再生ボタンフリー素材

一時停止ボタン
一時停止ボタンフリー素材

停止ボタン(使ってないけどおまけです)
停止ボタンフリー素材

ボタン画像は僕のオリジナルです。
フリー素材ですが、使っていただいたときには、ブログやTwitterでリンク付きのご紹介をお願いいたします!・ω・


フリー素材配布に使った場合のレイアウトを考える


表(テーブル)に入れて使うとどうでしょうか。

効果音試聴説明mp3ogg
ピッシンプルなサイン波です。ボタンを押す音などに。DLDL
ファンファーレ荘厳な感じです。勝利・成功時の景気づけに。DLDL

おっ、いい感じですね。(DLはまだできません)

BGMの方は配布するファイルの種類が多いから大変そうです。

曲名試聴説明mp3
ogg
MIDI
古の街街・フィールドBGM。静かで神秘的。1ループ1:46。mp3
ogg
Loop
End

試聴プレイヤーの馴染みようは素晴らしいですが、どうしてもDL欄がごちゃっとしちゃいますね^^;
まあ仕方ないですよねー。ブログの幅は今のままが気に入っているんです。


※外部サービスの埋め込みプレイヤーを利用する場合はこちら
SoundCloud・クレオフーガ・chobit比較 DL販売する音声作品の試聴データ用にはどれが最適?
スポンサーリンク
posted by Rei Yumesaki at 01:40 | PC関連 おすすめツール紹介 | 更新情報をチェックする
いろいろ見たけど、埋め込みmp3プレイヤーは「audio.js」がおすすめ! 対応ブラウザ多し、デザイン良し、設置は簡単!
先月の人気記事 TOP5