サイトにmp3プレーヤーを簡単に埋め込むプラグイン「WordPress Audio Player」 ~ Puti Developers Blog

おはようございます。Pineです。
先日のMidi2.0の紹介記事で、Midiをダイレクトエンコードしたmp3を簡単に
再生できるように、ということで、初めてWebに音楽プレーヤーを埋め込む
プラグインを使用してみました。

今日はそのプラグインを紹介しようと思います。
詳細は以下から.......
プラグインの名前をみて気がつく方もいるかもしれませんが、これは元々
WordPressのプラグインとして使われているものです。
が、SWFのフラッシュのみを取り出して用いると、他のブログやサイト
でも問題なく使えてしまうんですね。

HTML5から登場の audio タグの使い方 ~ Puti Developers Blog

今朝、Flashを使った簡単なmp3プレーヤーの設置方法を紹介しましたが、そんな方法よりももっと簡単に曲を設置できる新機能があったことをすっかり忘れていました。 ...
HTML5対応版はこちら

＊＊　必要なもの　＊＊

このプラグインは
http://wpaudioplayer.com/download/
にて配布しています。

ダウンロードすると、

・player.swf
・audio-player.js
・etc....

といろいろファイルが入っていますが、今回はPlayer.swfのみ用います

＊＊　プラグインを使う準備　＊＊

たいした手順ではありません。
Player.swfと、再生したいmp3を用意します。
それを、自分のサーバーにアップロードして、アドレスを控えます。
DropboxのPublicリンクを活用するのも一つの手です。

＊＊　使用方法　＊＊

実際にこのプラグインを埋め込むときは、以下のようなコードを
HTMLに埋め込むことになります。

////////////////////////////////////////////////////////////////////////

<object data="Player.swfのアドレス" height="24" id="audioplayer1" type="application/x-shockwave-flash" width="290"> <param name="movie" value="Player.swfのアドレス" />
<param name="FlashVars" value="playerID=1&soundFile=MP3のアドレス" />
<param name="quality" value="high" />
<param name="menu" value="false" />
<param name="wmode" value="transparent" />
</object>

////////////////////////////////////////////////////////////////////////

赤で記述されているところは、それぞれ自分の環境にあったアドレス
を入れて使います。
また、一つのページに複数のプレーヤーを埋め込むときは、一つ目の要素の
idの名前をかえましょう。（上のスクリプトで青くなっているところです）

これを貼付けるだけで、以下の様なプレーヤーを埋め込むことができます。

また、うまく再生されない場合は、ダウンロードしたファイルに同根されて
いたaudio-player.jsを自分のサーバーにアップロードして、

////////////////////////////////////////////////////////////////////////

<script src="audio-player.jsのアドレス" type="text/javascript">
</script>
<script type="text/javascript">

AudioPlayer.setup("player.swfのアドレス", {
width: 290
});

</script>

////////////////////////////////////////////////////////////////////////

というコードをヘッダに埋め込み、

////////////////////////////////////////////////////////////////////////

<p id="audioplayer_1">Alternative content</p>
<script type="text/javascript">
AudioPlayer.embed("audioplayer_1", {soundFile: "MP3のアドレス"});
</script>

////////////////////////////////////////////////////////////////////////

と、プレーヤーを埋め込む部分に記述する方法で試せばうまくいくと思います。

いずれの方法でも、手軽にプレーヤーを埋め込むことができます。
ただ単純にmp3をおくのではなく、すてきなフラッシュで埋め込めると、
ページを書くのも少し楽しくなってきますね。