実際の動きはこちら。↓(音が出ますよー)
※音源は tecra よりお借りしました。ありがとうございます!
再生すると「ばよーん」と開き、停止すると「しゅるーん」と閉じる、Flashを利用したMP3プレーヤーです。
よくあるプレーヤーは、↑のように複数並べている場合、同時に再生すると音が重なってしまいますが、これは空気読んで動いてくれます!(再生して試してみてね)
ツイッターの情報を表示できる「Twitter.js」と合わせて、tecra.info のページに利用したのですが、かわいくて使いやすいと思うのでメモメモ。
使い方の詳しい解説はこちら。
Embedded MP3 Audio Player
元はWordPress用のプラグインらしく、それっぽいことが書いてあります。
WP用プラグインとしての解説&ダウンロードページはこちら。
Audio Player Wordpress plugin
普段からWPをいじっている方にとっては、もしかして、有名なのかな?
WPはテスト程度にしか触ったことがないので分からないですが......。
ともかく、WPでも何でもない静的なページにも組み込む方法があるとのこと。
解説をフィーリングで訳してみると、
- こちらのページから「audio-player.zip」をダウンロード
- 「player.swf(プレーヤー本体のファイル)」と「audio-player.js(組み込むJSファイル)」を取り出す
- サーバーに「audio」というディレクトリを作り、その中に、上記の2ファイルと読み込みたい音声ファイル(.mp3)をアップロード
- 解説ページ「Tutorial」の項目にある、13行にわたるスクリプトをコピー
- MP3プレーヤーを表示したいところにペースト
すれば、ページに音を組み込むことができます☆
スクリプトにあるファイルURLは、任意のものに書き変えてください。
ディレクトリは「audio」という名前でなければ動かないというわけではないので、そのあたりは適当に。
この時点で、確認できる全ブラウザでちゃんと動くよー、という方は、下記はスルーしていただけると嬉しいです。
というのも、解説によれば上記だけで動くはずなんですが、自分の動作確認環境では、FireFox3でしか完全に動きませんでした。
IE8、IE Tester6と7、Google Chrome3では、「ばよーん」と動くものの音声ファイルが再生できなかったのです。
で、ちょこまか探してたら見つけたのがここ。
WordPress Audio Player
「Audio Player 2.0 beta」ということで、ベータ版ですが、WPのプラグインとしての最新版をダウンロードすることができるようです。
ここの、「Download」→「Standalone player」という項目にある「Download (2.0 beta 6)」より、最新版の「player.swf」と「audio-player.js」をゲットして使ってみたところ、上記でうまく動かなかったブラウザでも、利用できるようになりました。
多用するとバリデーションの評価は低くなりますが、見た目がシンプルだし、コンパクトだし、idをふることで数を増やせるし......と、なんだかいろいろな場面で使えそうなので、ちょっと楽しみです。






