簡単にウェブサイトに埋め込めるMP3プレイヤー

こんにちは、さち です。

先日の記事「音声素材を電話音声っぽく加工する」で
サンプルのMP3を再生できるように
ウェブページにプレイヤーを埋め込みました。

その時に利用したのが、導入が簡単で見た目もシンプルな
「MP3 Player」というプレイヤーです。

今回は、この「MP3 Player」の導入方法の覚え書きです。
MP3 Plyer には機能が異なるいくつかの種類がありますが
「MAXI」の導入方法について書いていきます。

「MP3 Player」の特徴

私が「MP3 Player」を選んだ理由は次の3つ。

• とにかく軽い： プレイヤー本体は6.7KB、最軽量verなら2.6KB
• 導入が簡単： swfファイルだけ準備すればOK
• カスタマイズ可能： 必要なボタンだけを表示できる

最初は他のプレイヤーを導入しようと思ったのですが
重かったり、導入が面倒だったりと条件が合いませんでした。

使用のための前準備

プレイヤー本体である swfファイル をダウンロードします。

1. MP3 Player のダウンロードページ にアクセスし
   player_mp3_maxi.swf のリンク上で「右クリック」→「名前を付けてリンク先を保存」。
   （Internet Explorer の場合は「右クリック」→「対象をファイルに保存」）
   
2. swfファイル が PC にダウンロードされました。
   
3. swfファイル を自分のサーバーにアップロードします。
   

これで使用のための前準備は完了です。

基本コード

MP3 Player の使用に必要な基本コードは4行のみ。
HTML ファイルに下記のように記述すればOK。

<object type="application/x-shockwave-flash" data="http://example.com/player_mp3_maxi.swf" width="200" height="20">
<param name="movie" value="http://example.com/player_mp3_maxi.swf" />
<param name="FlashVars" value="mp3=http://example.com/sample.mp3" />
</object>

赤字，緑字の部分は自サイトのファイルに書き換えましょう。
赤字は、プレイヤー本体（swfファイル）がある場所
緑字は、再生するMP3ファイルがある場所です。
場所（URL）の記述は絶対パス，相対パスどちらでもよいです。

実際に基本コードのみで設置したプレイヤーはこんな感じ。
再生ボタン，シークバーのみでシンプルです。

プレイヤーをカスタマイズ

プレイヤーの幅，高さの変更などをするには
「name」値が「FlashVars」である <param>タグ の「value」に
カスタマイズ用のコードを追記する必要があります。

追記の際は、value の値の末尾に「&（アンパサンド）」を付け
新たなパラメーターを記述します。

■プレイヤーの幅，高さを変更
例えば、プレイヤーの幅を「320px」に変更する場合は
<object>タグ内の width の値を 320 に変更し
さらに、MP3ファイル指定の後に「&」を付け「width=320」と記述。
高さを変更する場合は同様に「height」を変更，追加すればOK。

<object type="application/x-shockwave-flash" data="player_mp3_maxi.swf" width="320" height="20">
<param name="movie" value="player_mp3_maxi.swf" />
<param name="FlashVars" value="mp3=sample.mp3&width=320" />
</object>

■ボリュームを設置
MP3ファイル指定の後に「&」を付け「showvolume=1」と記述。
ボリュームの幅，高さは「volumewidth」「volumeheight」
ボリュームの初期値（0～200）は「volume」で指定できます。

<object type="application/x-shockwave-flash" data="player_mp3_maxi.swf" width="200" height="20">
<param name="movie" value="player_mp3_maxi.swf" />
<param name="FlashVars" value="mp3=sample.mp3&showvolume=1&volume=100" />
</object>

他にも様々なパラメーターがあります。
詳細は公式サイトの Documentation を参照して下さい。

MP3 Player 公式サイトはこちらからどうぞ。

　　　→ MP3 Player （英語）

サンプルの音楽にはこちらのものを使わせて頂きました。
ありがとうございました。

　　　→ FM音源風BGM2【ループ対応】 - ニコニ・コモンズ